一、标准方法
标准方法当然就是指使用CSS3的方法了，这个应该不少同行应该知道，参见如下代码：
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
释义为：横向偏移3像素，纵向偏移3像素，模糊4像素，颜色为纯黑。
如果我们把含上面样式的这个class shadow应用到图片上，就会产生如下的效果（截自Firefox3.6）：
二、那么IE浏览器呢？
对于目前对CSS3支持如狗屎的孤芳自赏的IE浏览器怎么办呢？box-shadow属性对于IE浏览器就像是圣诞树上的彩灯——装饰而已。
好在IE浏览器有个IEshadow滤镜，是IE浏览器私有的一个东西，可以模拟还凑合的盒阴影效果，使用类似于下面的代码：
.shadow {
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
将shadow这个class应用到图片上，结果如下（截自IE6浏览器）：
虽然效果不及Firefox，chrome等现代浏览器，但是还能凑合着用用。
三、样式综合
如下代码：
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
更多CSS3属性的跨浏览器支持可以查阅这里(css3please.com)。
四、浏览器支持情况
Firefox 3.5+
Safari 3+
Google Chrome
Opera 10.50
Internet Explorer 5.5
网友评论