1.語法：box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow如果是負值，陰影在左邊，反之，陰影在右邊；v-shadow如果是負值，陰影在上邊。即，從左到右，從上到下。
blur值越大，模糊面積越大，陰影就越大越淡。 不能為負值。默認為0，此時陰影邊緣銳利.
spread取正值時，陰影擴大；取負值時，陰影.收縮。默認為0，此時陰影與元素同樣大
可以點擊此處測試下：http://www.css88.com/tool/css3Preview/Box-Shadow.html
2.兼容性：
詳細信息：https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
3.ie濾鏡：
ie8以前 是不兼容這個屬性的，但是可以用濾鏡模擬。可以參考：
https://www.w3cplus.com/content/css3-box-shadow.
http://blog.sina.com.cn/s/blog_4c1e6a010101fvgw.html
4.demo:[一般都是在google測試]
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>box-shadow</title> 6 <style> 7 .box-shadow{ 8 float: left; 9 width: 200px; 10 height: 200px; 11 background-color: #3a9; 12 margin: 20px; 13 } 14 .aa{ 15 /*兼容ie*/ 16 filter: progid:DXImageTransform.Microsoft.Shadow(color='#3a9',Direction=135, Strength=5);/*for ie6,7,8*/ 17 background-color: #ccc; 18 -moz-box-shadow:2px 2px 5px #969696;/*firefox*/ 19 -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ 20 box-shadow:2px 2px 5px #969696; 21 } 22 .a{ 23 box-shadow: 2px 2px #f00; 24 } 25 .b{ 26 box-shadow: 2px 2px 2px #f00; 27 } 28 .c{ 29 box-shadow: 2px 2px 2px -2px #f00 ; 30 } 31 .d{ 32 box-shadow: 2px 2px 2px 2px #f00 ; 33 } 34 .e{ 35 box-shadow: 2px 2px 2px 4px #f00 inset; 36 } 37 .f{ 38 box-shadow: 2px 2px 2px 4px #f00 ; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="box-shadow"></div> 44 <div class="box-shadow aa">aa</div> 45 <div class="box-shadow a">a</div> 46 <div class="box-shadow b">b</div> 47 <div class="box-shadow c">c</div> 48 <div class="box-shadow d">d</div> 49 <div class="box-shadow e">e</div> 50 <div class="box-shadow f">f</div> 51 </body> 52 </html>
5.效果圖：
效果圖不美觀，主要用來測試各個效果。沒有在ie6 7 8上測試，所以以兼容模式處理后的aa方框沒有顯示出來兼容后的效果。