CSS阴影效果(兼容N多浏览器)，boxshadow

Css盒阴影效果

标准方法当然就是指使用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浏览器有个IE shadow滤镜，是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)。

五、正对IE浏览器的阴影效果

Shadow:为对象内容建立阴影效果

/* hack for ie */
background-color:#fff;

/* gte ie8 */ 
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6)progid:DXImageTransform.Microsoft.Shadow
(color=#dddddd,direction=90,strength=10)progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)"; 

/* lte ie7 */ 
*filter:progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow
(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6); 

假如对象内有文本而无背景( background )和图片，则每个文本字符将会被辉光环绕。
假如对象内有背景( background )或图片，则整个对象容器会被辉光环绕。
假如对象的子对象定位超出了对象边界，则仅仅在对象容器内的内容会被辉光环绕。