标签：
box-shadow 属性向框添加一个或多个阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。
注释：box-shadow 向框添加一个或多个阴影。
该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3知识之阴影box-shadow</title> <style> *{ margin: 0; padding: 0; } body{ background-color: #f0f0f0; } div{ width: 200px; height: 200px; margin: 60px 30px; background-color: #35b091; float: left; border-radius: 16px; text-align: center; line-height: 200px; } /*底部阴影*/ .div1{ box-shadow: 0 6px 3px -3px rgba(0,0,0, 0.8); } /*两侧阴影*/ .div2{ box-shadow: 6px 0px 3px -3px rgba(0,0,0, 0.8), -6px 0px 3px -3px rgba(0,0,0, 0.8); } /*内阴影*/ .div3{ box-shadow: 0px 0px 6px rgba(0,0,0, 0.8) inset; } /*内侧单边阴影*/ .div4{ box-shadow: 0px -6px 6px -6px rgba(0,0,0, 0.8) inset; } /*内侧双边阴影*/ .div5{ box-shadow: -6px 0px 6px -6px rgba(0,0,0, 0.8) inset , 0px 6px 6px -6px rgba(0,0,0, 0.8) inset; } </style> </head> <body> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> <div class="div4">div4</div> <div class="div5">div5</div> </body> </html>
方法一：可以使用IE的Shadow滤镜
基本语法：filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）,Strength=阴影半径（数值）);
注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。
.box-shadow{ filter: progid:DXImageTransform.Microsoft.Shadow(color=‘#969696‘,Direction=135, Strength=5);/*for ie6,7,8*/ background-color: #ccc; -moz-box-shadow:2px 2px 5px #969696;/*firefox*/ -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ box-shadow:2px 2px 5px #969696;/*opera或ie9*/ }
方法二：有些js和.htc的hack文件可以实现IE中的阴影效果。
ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件，不只是box-shadow，它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。
它的使用方法是：下载它并放到你的服务器目录，在你的<head></head>里面写入下面的代码:
.div1 { -moz-box-shadow: 10px 10px 20px #000; -webkit-box-shadow: 10px 10px 20px #000; box-shadow: 10px 10px 20px #000; behavior: url(ie-css3.htc); }
这个脚本的缺点是IE只支持一部分的box-shadow值。
需要注意：
当你使用了这个htc文件后，你的CSS里面，只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种，IE就会渲染。
当使用了这个htc文件后，你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。
不支持RGBA值中的alpha透明度。
不支持inset内阴影。
不支持阴影扩展。
阴影在IE中只会显示为黑色，不管你设置成其它什么颜色。
方法三：使用jQuery的插件jquery.boxshadow.js
使用方法很简单，将该文件和jquery版本库引入head标签，插入以下js效果代码：
<script type="text/javascript"> $(document).ready(function(){ if($.browser.msie) { $(‘.obj‘).boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow } }); </script>
注意：js中可以使用：obj.style.webkitBoxShadow=值（字符串）;obj.style.MozBoxShadow=值（字符串）;obj.style.boxShadow=值（字符串）;
CSS3阴影演示工具 http://www.css88.com/tool/css3Preview/Box-Shadow.html
参考：http://blog.csdn.net/freshlover/article/details/7610269
标签：
原文地址：http://www.cnblogs.com/lvmylife/p/5536772.html
