Box Shadow

1.box-shadow属性

box-shadow属性是一个给元素添加阴影效果的css3属性，允许给元素设置一个或多个阴影效果，IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

2.语法

box-shadow属性由五个值组成：h-shadow（水平距离）、v-shadow（垂直距离）、blur（模糊距离）、spread（尺寸）、color（颜色）、inset（内部），其中最后一个属性默认为外部outset，前2个水平距离和垂直距离必需要有，后面可选择设置。

.box{width: 400px;height: 400px;background-color: aqua;box-shadow: 10px 20px 5px 10px red;}

显示效果如下：

3.h-shadow(水平距离)

h-shadow可设置正负值，代表阴影向水平方向移动的距离。规定右边为正，左边为负。

css
.box_left{box-shadow:10px 20px 5px 10px red;
}
.box_right{box-shadow:-10px 20px 5px 10px red;
}

4.v-shadow（垂直距离）

v-shdow也可设置正负值，代表阴影向垂直方向移动的距离。规定向下为正，向上为负。

.box_top{box-shadow:10px 20px 5px 10px red;
}
.box_bottm{box-shadow:-10px 20px 5px 10px red;
}

5.blur(模糊距离)

blur设置元素阴影的模糊的距离，负值是不被允许的默认当作0处理，0意味着阴影没有任何模糊完全显示，模糊半径越大，阴影越模糊朦胧。

6.spread（尺寸）

spread设置阴影的尺寸大小，代表元素阴影向各个方向延伸的大小，为0时会使阴影延伸得和元素本身大小一样，为负值会使阴影缩小的比元素本身还小，为正值会让阴影延伸得比元素还要大。

7.color（颜色）

color设置阴影的颜色。

8.inset（内部）

inset设置阴影的位置处于元素内部，当设置这个属性的时候，会与默认时候的规律相反，即当给水平距离和垂直距离设置正值时，阴影会分别向左和上移动。

Box Shadow相关推荐

html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
Box Shadow CSS教程–如何向任何HTML元素添加投影
We can add a drop shadow to any HTML element using the CSS property box-shadow. Here's how. 我们可以使用CS ...
html span box shadow,box-shadow用法
一. box-shadow的定义和语法当我们需要设置多个阴影时,中间需要将每个阴影用逗号隔开. /*html代码*/ /*对应的css代码*/ .test{ width: 100px; height ...
Bootstrap3.x - 源代码分析
参照http://v3.bootcss.com/css/ 文档与源代码 colors 比较全面定义总结有意义的颜色.所有uI要用的颜色,都先从已定义的读,这样保证样式的同一性,而且方便以后开发主题库. ...