CSS实现跨浏览器兼容性的盒阴影效果
一、无关紧要碎碎念
在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):
三、那么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'); }
您可以狠狠地点击这里:跨浏览器盒阴影效果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
【CSS实现跨浏览器兼容性的盒阴影效果】相关文章
6. DalekJS – 基于 JavaScript 实现跨浏览器的自动化测试
7. CSS3盒阴影实例
9. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
10. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
本文来源:https://www.51html5.com/a803.html
﹝CSS实现跨浏览器兼容性的盒阴影效果﹞相关内容
- HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册
- 浏览器兼容突破一小步 OA易用性革新一大步
- 使用HTML5画布(canvas)生成阴影效果
- 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼
- 2013年五大主流浏览器HTML5和CSS3兼容性大比拼
- CSS3 HTML5实例三(块阴影与文字阴影)
- 未来战争:四大手机浏览器HTML5兼容性横评
- 百度手机浏览器正式版,HTML5兼容性得分303
- 主流网络浏览器HTML5兼容性能大PK
- 百度手机浏览器HTML5兼容性测试得分超300