CSS实现跨浏览器兼容性的盒阴影效果

CSS实现跨浏览器兼容性的盒阴影效果

1、可有可无碎碎念

在web页面的ui表现中，投影效果能够说是很是常见的一种表现效果了。例如开心网的头像修饰效果：

 

然而，在CSS2的时代，咱们多半使用图片实现相似效果，或是使用CSS其余属性模拟阴影效果，可是，如今，CSS3的崛起使得这个问题已经再也不是是个问题了，本文就将展现如何实现跨浏览器的盒阴影效果。

 

2、标准方法

标准方法固然就是指使用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）：

 

 

3、那么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等现代浏览器，可是还能凑合着用用。

 

4、样式综合

以下代码：

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

}

您能够狠狠地点击这里：跨浏览器盒阴影效果demo

更多CSS3属性的跨浏览器支持能够查阅这里(css3please.com)。

 

5、浏览器支持状况

Firefox 3.5+

Safari 3+

Google Chrome

Opera 10.50

Internet Explorer 5.5