CSS3中的box-shadow
CSS中的新成员:box-shadow
在box-shadow尚未问世的时候，我最烦的除了做圆角就是阴影了。虽然说在页面上适当的添加一些阴影确实很不错，但是做起来就不简单了。要是阴影简单一点，切一张图就好了，但是拓展性去很差。当高贵的需求提出修改，“这里加长一点”，“这里颜色太浅”，“这个能不能换个颜色”…………我们只能说“呵呵”.
但是，时代不同了，在迅速发展的21世纪，前端攻城湿迎来了翻身农奴把歌唱一般的今天——box-shadow。让那些高贵的IE都完蛋蛋去吧！！
语法
在CSS3中，我们可以使用box-shadow属性实现容器的阴影效果。在这个属性中，你需要设置阴影相对容器水平和垂直方向上的偏移值，阴影的颜色，模糊程度和拓展半径。
box-shadow完整的语法：
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
其实就是：
{box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
偏移量
test{
box-shadow:10px 10px red;
}
- 第一个10px表示阴影在X轴方向上向右的偏移大小。如果是负数，阴影向左偏移。
- 第二个10px表示阴影在Y轴方向上向左的偏移大小。如果是负数，阴影向上偏移。（如果你只设置一个数值，浏览器将不会识别这条样式。）
- 最后一个值表示阴影的颜色。如果你没有设置颜色，在不同的浏览器上会有不一样的效果，有的默认黑色，有的则是透明的，所以在实际应用中不应该忽略颜色的设置（在我的电脑上，Chrome，firefox，IE10显示的是黑色，safari显示的是透明）。
如果将X轴的偏移值改成这个容器的宽度，将Y轴的偏移值0：
将Y轴的偏移值改成这个容器的高度，将X轴的偏移值0：
可以看到，如果只是设置了X，Y轴上的偏移值的话，形成的阴影大小就是原来容器的大小。
阴影模糊
当我们设置了第三个数值，也就是阴影模糊度之后：
.test{
box-shadow:10px 10px 5px red;
}
可以看到加上了第三个值之后，阴影出现了模糊。
要注意的是：
此参数是可选，而且其值只能是为正值其值越大阴影的边缘就越模糊；
如果值为负值时，浏览器将会忽略；
如果值为0时，表示阴影不具有模糊效果。
现在再来试试看加上阴影半径属性值之后的效果
.test{
box-shadow:0px 0px 0px 5px red;/*为了效果明显，将偏移值和模糊度的值设置成0。*/
}
之前提到过，如果只是设置了X，Y轴上的偏移值的话，形成阴影大小就是原来容器的大小。
当设置了阴影半径之后，阴影的大小其实就是，保持中心不变，在原来的基础上向四个方面增加扩散。例子中设置为5px，实际效果就是阴影向四个方向各增加了5px。
阴影类型
这个参数也是可选的。
如果不设值，其默认的投影方式是外阴影；
如果设值，只能设置为唯一的值：inset，修改投影方式为内阴影。
当阴影类型设置为inset时，对于X，Y轴偏移值来说，有一点点差异
.test{
box-shadow: inset 10px 10px 0px 0px red;/*偏移量都是正值*/
}
.test{
box-shadow: inset -10px -10px 0px 0px red;/*偏移值为负值*/
}
X轴上的偏移情况：当值为正值时，阴影在左侧；当值为负值时，阴影在右侧。 Y轴上的偏移情况：当值为正值时，阴影在上面；当值为负值时，阴影在下面。
多重阴影效果
box-shadow还支持多重阴影效果。 想要在一个元素上显示出多种阴影，只要用逗号把每种阴影的分开就可以。
.test{
box-shadow: 0px 0px 0px 5px red,
0px 0px 0px 10px green,
0px 0px 0px 15px blue,
0px 0px 0px 20px yellow;
}
同时还要注意阴影添加的顺序，这会影响到阴影的层级（我的觉得就像是css中的z-index）。 每个阴影都可以看成是容器的投影，按照书写的先后顺序，层级依次降低。 在这个例子中，最先写的是红色的阴影，所以它层级最高；最后写的是黄色的阴影，所以排在最底下。如果试着讲红色阴影的半径加大，你会发现红色阴影会覆盖其他的所有阴影。
结束语
因为box-shadow提供了很多参数，所以不同参数之间可以巧妙搭配出不同的效果。对于box-shadow使用，我暂时就学到这么多。
错误之处，欢迎指正！
