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