&nbs p;
一、无关紧要碎碎念
在web页面的ui表现中，投影效果可以说是非常常见的一种表现效果了。例如开心网的头像修饰效果：
然而，在 CSS 2的时代，我们多 半 使用图片实现类似效果，或是使用CSS其他属性模拟阴影效果，但是，现在，CSS3的崛起使得这个问题已经不再是是个问题了，本文就将展示如何实现跨浏览器的盒阴影效果。
二、标准方法
标准方法当然就是指使用CSS3的方法了，这个 应该 不少同行应该 知道 ，参见如下代码：
.shadow { box -s hadow: 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: " PR ogid: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，ch rom e等现代浏览器，但是还能凑合着用用。
四、样式综合
如下代码：
.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 C hr ome opera 10.50 internet E xp lorer 5.5（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS实现跨浏览器兼容性的盒阴影效果 全部内容，希望文章能够帮你解决 html5教程-CSS实现跨浏览器兼容性的盒阴影效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS实现跨浏览器兼容性的盒阴影效果的详细内容...