css3入门

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

字号+ 作者: 来源: 2014-11-16 21:49 我要评论( )

一、无关紧要碎碎念 在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了。例如开心网的头像修饰效果: 然而,在CSS2的时代,我们多半使用图片实现类似效果,或是使用

一、无关紧要碎碎念

在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了。例如开心网的头像修饰效果:
开心网头像投影效果 张鑫旭-鑫空间-鑫生活

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

 

二、标准方法

标准方法当然就是指使用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):
Firefox下的盒阴影效果截图 张鑫旭-鑫空间-鑫生活

 

三、那么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浏览器):
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');
}

您可以狠狠地点击这里:跨浏览器盒阴影效果demo

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

 

五、浏览器支持情况

  • Firefox 3.5+
  • Safari 3+
  • Google Chrome
  • Opera 10.50
  • Internet Explorer 5.5

如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去这里进行提问交流。
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=711

(责任编辑:admin)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • divcss入门教程-DIVCSS布局第4课-设置页面和浏览器的元素

    divcss入门教程-DIVCSS布局第4课-设置页面和浏览器的元素

    2015-09-30 11:40

  • divcss网页设计教程-DIVCSS布局第1课-设置图片效果

    divcss网页设计教程-DIVCSS布局第1课-设置图片效果

    2015-09-30 11:38

  • divcss入门教程-DIVCSS布局第1课-设置图片效果

    divcss入门教程-DIVCSS布局第1课-设置图片效果

    2015-09-30 11:36

  • divcss入门教程-CSS基本知识第3课-设置丰富的文字效果

    divcss入门教程-CSS基本知识第3课-设置丰富的文字效果

    2015-09-30 11:34

网友点评
s