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方框没有显示出来兼容后的效果。