阴影在很多地方都会见到，加上阴影给人以立体的感觉，今天就简单的总结一下css3的属性text-shadow和box-shadow是如何实现阴影效果的。
一. text-shadow属性
该属性是来给文字添加阴影效果的，接下来看一下他的用法，和所实现的效果： 用法：text-shadow:h-shadow v-shadow blur color;
h-shadow：水平方向的偏移量，值为正数表示像左偏移，为负数表示向右偏移，单位为距离单位；v-shadow：垂直方向的偏移量，值为正数表示像向下偏移，为负数表示向上偏移，单位为距离单位；blur：阴影的模糊距离，单位为距离单位；color：表示阴影的颜色。小样例代码：
<!DOCTYPE html> <html> <head> <style> .box{ width:200px; height:200px; font-size: 3em; text-align: center; } .text-shadow-1{ text-shadow: 0px 0px 10px #000; } .text-shadow-2{ text-shadow: 3px 3px 10px #000; } .text-shadow-3{ text-shadow: -3px -3px 10px #000; } </style> </head> <body> <div class="container"> <div class="box"> <div class="text-shadow-1"> nihao </div> </div> <div class="box"> <div class="text-shadow-2"> nihao </div> </div> <div class="box"> <div class="text-shadow-3"> nihao </div> </div> </div> <script type="text/javascript"> </script> </body> </html>效果如图： text-shadow-1：没有设置水平和垂直偏移量，阴影在四周环绕
text-shadow-2：设置水平和垂直偏移量均为正数，阴影向左下方偏移
text-shadow-3：设置水平和垂直偏移量均为负数，阴影向右上方偏移
二. box-shadow属性
该属性是给盒子的边框设置阴影，给盒子以立体的感觉，在很多网站都特别常见，下面内容是它的用法和实现效果： 用法：box-shadow:[inset] h-shadow v-shadow blur color 解释：这个的值出了多个inset外，基本和上面的text-shadow值一致，inset指阴影向盒子内部，默认是外部。
小样例代码：
<!DOCTYPE html> <html> <head> <style> .container{ display: flex; flex-direction: row; justify-content: space-around; margin-top:200px; } .box{ width:200px; height:200px; font-size: 3em; text-align: center; } .box-shadow-1{ box-shadow: 0px 0px 20px #f00; } .box-shadow-2{ box-shadow: 3px 3px 20px #f00; } .box-shadow-3{ box-shadow: -3px -3px 20px #f00; } .box-shadow-4{ box-shadow: -5px 0 10px red, 5px 0 10px blue, 0 5px 10px yellow, 0 -5px 10px green; } .box-shadow-5{ box-shadow: inset 0 0 20px green; } </style> </head> <body> <div class="container"> <div class="box box-shadow-1"> </div> <div class="box box-shadow-2"> </div> <div class="box box-shadow-3"> </div> <div class="box box-shadow-4"> </div> <div class="box box-shadow-5"> </div> </div> <script type="text/javascript"> </script> </body> </html>效果如图：
以上的5个框，分别对应上述的5个CSS样式，具体就不详细解释了，最后一个设置了inset属性，所以阴影向内；倒数第二个，用了个小技巧，分别给四周设置不一样的阴影，记得写在同一个box-shadow后面，用逗号隔开，不要分开写，会出错哦。
更多关于box-shadow的内容请参考这位博主：http://blog.csdn.net/freshlover/article/details/7610269
