用CSS代码实现DIV标签阴影效果兼容所有浏览器

曾经为了实现阴影效果，大家都是用PS先做模版然后切块，使用表格布局，虽然这样做能实现效果各个浏览器都能用，但是会导致一个页面的打开压力，一般普通的站点要求不算什么。对于百万级数据的点可不能这么做，因为每一个背景或者图片记载都是一次请求，这对服务器的压力特别大。

所以今天我就说说 用css实现 div标签阴影效果。

如今CSS3的崛起，阴影效果已经不再是难题。但是对于CSS3的支持不是所以浏览器都能支持。类似IE，IE9.0版本对css3以及HTML5的支持都不是很完善，然而对于目前互联网使用浏览器的情况还是ie诸多，或者说使用ie内核的居多。

所以为了实现兼容大多数主流的浏览器，贴出以下代码：

.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');
}

此CSS代码，在IE6下也能实现阴影效果，CSS3的代码在IE版本中虽然不支持，但是在后面我们重新定义了IE下的样式，使用的是IE的滤镜技术。而对其他像火狐狸、谷歌等浏览器可以支持CSS3的就直接能实现阴影。

请注意： 上面代码中Direction=135 和上面是没有换行的，如果你试用此代码请先纠正哦。