CSS跨浏览器盒阴影效果.docVIP

CSS跨浏览器盒阴影效果 2010-12-23? 来自：鑫空间-鑫生活? 字体大小：【大?中?小】 摘要：web页面的ui表现中，投影效果可以说是非常常见的一种表现效果了。CSS2的时代，我们多半使用图片实现类似效果，或是使用CSS其他属性模拟阴影效果，但是，现在，CSS3的崛起使得这个问题已经不再是是个问题了，本文就将展示如何实现跨浏览器的盒阴影效果。 一、无关紧要碎碎念 在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属性的跨浏览器支持可以查阅这里(/) ()。 五、浏览器支持情况 Firefox 3.5+ Safari 3+ Google Chrome Opera 10.50 Internet Explorer 5.5 CSS跨浏览器盒阴影效果 （2） 摘要：之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章——“CSS实现跨浏览器兼容性的盒阴影效果”，前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜，但是效果过渡不自然。本文实现的IE下的盒阴影效果就相对非常自然 一、前言 我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章——“CSS实现跨浏览器兼容性的盒阴影效果”，本文虽然题目类似，但是核心部分是有差异的。前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜，但是使用的是shadow滤镜，这种滤镜的效果很牵强，效果过渡不自然，见下图： 您可以狠狠地点击这里：IE下阴影不自然demo 而本文实现的IE下的盒阴影效果就相对非常自然，而且还支持内阴影的UI表现。到底是如何实现的，究竟效果如果，请继续浏览。 二、浏览器纯