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

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 19:03 点击:

一、无关紧要碎碎念

在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

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • WordPress添加百度喜欢按钮小技巧
    • Wordpress 博客如何实现自定义Gravatar头像
    • 网站设计分析:建立良好的视觉层级
    • 创建不平衡的平衡:在网页设计中使用不对称设计
    • 7大主流B2C首页导航栏设计对比分析
    • Wordpress页面模板制作方法及使用
    • 网站设计分析:“中国式设计”的三个方向
    • 修改去掉Zblog列表插件文章排行调用标题前面的时间
    • 网站设计与开发:11个在新终端上的网页设计趋势
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1