CSS实现阴影效果的3种方法

方法1是两层div，兼容FF3.1a+, Safari 3+, Chrome, IE6/7

.shadow_box{
background:black;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=4,makeshadow='true', shadowopacity=0.5);
}
.img_box{
position:relative;
-moz-box-shadow:3px 3px 3px #888;
-webkit-box-shadow:3px 3px 3px #888;
}

关于-moz-box-shadow，可参考颠覆网络35天 ─ 使用-moz-box-shadow渲染阴影。前面两个length长度取值对应着影子在水平和竖直方向的位移。第三个length长度取值是模糊半径。

方法2是两层div，除了IE8，全兼容(IE8应该也有方法可以兼容，没仔细去调)

.shadow_box2{
background:#333;
background:rgba(0,0,0,0.4);/*CSS3新属性，FF、Google Chrome、Safari支持*/
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; 
/* IE5 - 7 */
filter: alpha(opacity=40); 
/* Everyone else */
/*opacity: .5; 这是个泛浏览器支持的属性，但缺点是将所有嵌套元素都半透明化了。*/
}
.img_box{
background:#fff;
position:relative;
top:-4px;
left:-4px;
}

在CSS3中，RGBa 为颜色声明添加Alpha通道。RGB值被指定使用3个8位无符号整数(0 – 255)并分别代表红色、蓝色、和绿色。增加的一个alpha通道并不是一个颜色通道——它只是用来指定除其它三个通道提供的颜色信息之外的透明度。扩展阅读：CSS3之旅:RGBa颜色

方法3是一层div，兼容FF3.1a+, Safari 3+, Chrome, IE6/7/8

background:#fff;
-moz-box-shadow:4px 4px 3px rgba(0,0,0,0.4);
-webkit-box-shadow:4px 4px 3px rgba(0,0,0,0.4);
/* filter:progid:DXImageTransform.Microsoft.Shadow(enabled=true,color=#4f333333, direction=135, strength=4); */
filter:progid:DXImageTransform.Microsoft.DropShadow(enabled=true,color=#28000000,offX=4,offY=4,positive=true);
/*-(moz|webkit)-box-shadow 可以设置多重shadow，此处隐藏*/
/*-moz-box-shadow:4px 4px 3px rgba(0,0,0,0.1), -4px -4px 3px rgba(0,0,0,0.1), 4px -4px 3px rgba(0,0,0,0.1), -4px 4px 3px rgba(0,0,0,0.1);
-webkit-box-shadow:4px 4px 3px rgba(0,0,0,0.1), -4px -4px 3px rgba(0,0,0,0.1), 4px -4px 3px rgba(0,0,0,0.1), -4px 4px 3px rgba(0,0,0,0.1);*/
}

-moz-box-shadow也支持rgba颜色定义。RGBA同RGB相同，不过他添加了一个附加值标示透明度的Alpha通道。
Filter: DropShadow 里的color是可以设置透明度的，通过#AARRGGBB里的AA，以16进制表示。比如60%的黑色是#3C000000