每天CSS学习之box-shadow
box-shadow是CSS3的属性,目的是给盒子添加一个或多个阴影。怎么感觉有点像光明使者使用该法术照亮敌人的阴暗面?
box-shadow一共有六个属性,请看:
box-shadow: h-shadow v-shadow [blur] [spread] [color] [insert];
让我们来用中文翻译一遍:
box-shadow: x-offset y-offset [阴影模糊半径] [阴影扩展长度] [阴影颜色] [内置阴影]
上面打了中括号的都是可选的。
一般阴暗面都是在敌人的背后或内心,此文所讲的box-shadow也不例外,它在盒子的背后或者内置。如果不设置 阴影模糊半径(blur)和阴影扩展长度(spread),那么阴影与盒子是一样的大小。如果不设置某些值将之显现出来,是根本看不到的。
接下来解释一下这些属性:
1、h-shadow(x-offset):距离盒子左侧的长度值。为0px,则阴影的左侧与盒子的左侧一致,如果为5px,则阴影的左侧距离盒子左侧5px;
2、v-shadow(y-offset):距离盒子顶部的长度值。为0px,则阴影的顶部与盒子的顶部一致,如果为5px,则阴影的顶部距离盒子顶部5px。如下图:
红色的是边框,黑色的是阴影。因为没有设置blur和spread的值,所以阴影的大小与盒子是一样的,但是阴影在盒子背后。
3、blur(阴影模糊半径):该值不能为负值,且该值越大,阴影就越模糊,阴影面积就越大。如下图所示:
blur为0时,阴影不会模糊:
blur为5px时:
blur为25px时,阴影变得更模糊,且模糊半径更大:
4、spread(阴影扩展长度):该值可为正负值。如果为正值,如50px,则表示在阴影的每个边都外延50px个长度。如果为负值,如-50px,则表示在阴影的每个边都内缩50px个长度。
spread为0时:
spread为25px时:
spread为-10px时:
5、color(阴影颜色):设置阴影的颜色。就如上图,阴影的颜色被设置为black。虽然该值为可选参数,但是建议每次都显示指定。
可以用如下方式指定阴影的颜色:
a.直接写颜色名称,如black;
b.使用rgb(r,g,b),如rgb(255,0,0);
c.使用rgba(r,g,b,alpha),如rgba(255,0,0,0.5)。alpha指透明度,取值0~1之间,值越大,越不透明;
d.使用#FF0000这种方式。
以上讲的都是外阴影,即阴影在盒子外部。接下来讲一讲内阴影。
6、inset(内置阴影):如果不设置该值,阴影就是外置的(outset);否则就会将阴影内置到盒子中。
首先看一看阴影模糊半径:
再看一看设置了h-shadow和v-shadow的效果:
是不是感觉和外置阴影不一样?肯定的嘛,内置阴影和外置阴影的效果是相反的。
外置阴影的模糊半径是由四个边向外扩展,而内置阴影的模糊半径是向内扩展。
内置阴影的h-shadow和v-shadow隔离出来的就是内置阴影的面积。看懂了吧!
接下来看一下内置阴影spread的设置:
由此看来,不管是外置阴影,还是内置阴影,针对spread来说,只要为正值,就是扩展阴影面积;只要为负值,就是缩减阴影面积。
以上是添加一个阴影的做法,其实还可以添加多个阴影,每个设置之间用半角逗号“,”隔开。如下图所示:
如果添加了多个阴影,都设置了阴影模糊半径,那么最终的阴影模糊颜色是它们的综合。如:
上面最后一张图片是它们模糊后颜色的综合。
本篇文章的最后,让我们来制作一个太阳,象征着重庆的天气-_-!!!,热火朝天哟!
每天CSS学习之box-shadow的更多相关文章
- css学习归纳总结(三) 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
- css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...
- 说说CSS学习中的瓶颈
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
- CSS学习笔记(1):选择器
一.元素选择器 HTML文档元素就是最基本的选择器 如: <!DOCTYPE html> <html lang="en"> <head> < ...
- CSS学习中的瓶颈期深入分析
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 算警示吧——此文来自张鑫旭(说说CSS学习中的瓶颈)
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...
- CSS学习摘要-定位实例
CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...
- CSS学习之float解析
转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或 ...
随机推荐
- Nginx的安装和使用(Linux)
关于什么是Nginx,Nginx的优势和使用范围这里就不多说了.其实它就是一个web服务器.这篇文章主要是说Nginx的安装和使用. 安装方式有yum安装和源码安装,这里主要讲源码安装 1.安装依赖, ...
- laravel配置路由除了 / 都是404解决办法
1.php.ini开启phpopenssl 2.conf (nginx为例) location / { index index.html index.htm index.php l.php; #tr ...
- HTML第八章总结
Expanding your vocabulary 总述 在上一章节介绍了 CSS 的基础之后,这一章节更加具体地展开关于 CSS 的各种 rules 能够达成的效果.比如 字体:font-famil ...
- Java中的参数传递 --Java
1.基本类型传值,对象类型传地址 按值传递:当将一个参数传递给一个方法时,方法接收的是原始值的一个副本.因此,如果方法修改了该参数,仅改变副本,而原始值保持不变. 按引用传递:当将一个参数传递给一个方 ...
- MyEclipse配置Tomcat服务器(最简单的配置过程)
MyEclipse配置Tomcat服务器比较简单,在这里直接给出简要的配置步骤了,相信大家都能很容易明白…… 1.Window->Preferences 2.根据你的Tomcat版本找到对应的T ...
- 关于Android 主题的那些事
最近遇到了一个问题,主题的ActionBar的Title 颜色是黑色的 但是我的主界面由于用的是CoordinateLayot所以是白色的 整个黑色的就很难看 所以也想要把ActionBar 的Tit ...
- 【IDEA】【7】Git更新及提交
如果是Git管理的项目,顶部会出现这样的按钮 绿色代表commit到本地 蓝色代表update最新代码 Push:推送到远程服务器:右键项目->Git->Repository->Pu ...
- gleez框架获得时间控件
1,首先你要在你的页面上引用一个js <script src="<?php echo URL::base() ?>media/vendor/datepicker/Wdate ...
- 安卓——Activity生命周期
在xml 设计页面添加标签 xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...
- C++ leetcode::Reverse Integer
第一天上课,数据库老师说对于计算机系的学生,凡是在课本上学到的专业知识都是过时的.深以为然,感觉大学两年半真的不知道学了什么,为未来感到担忧,C++也不敢说是精通,入门还差不多.最近丧的不行,不管怎么 ...