|
[tr][td]
一、无关紧要碎碎念 在web页面的ui表现中，投影效果可以说是非常常见的一种表现效果了。例如某些网站的头像修饰效果： 图片：144940pb8zmd08t5j0v53b.jpg  然而，在CSS2的时代，我们多半使用图片实现类似效果，或是使用CSS其他属性模拟阴影效果。但是，现在CSS3的崛起使得这个问题已经不再是是个问题了。本文就将展示如何实现跨浏览器的盒阴影效果。 二、标准方法 标准方法当然就是指使用CSS3的方法了，这个应该不少同行应该知道，参见如下代码： [size=3].shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000;
}[/size]释义为：横向偏移3像素，纵向偏移3像素，模糊4像素，颜色为纯黑。 如果我们把含上面样式的这个class shadow应用到图片上，就会产生如下的效果（截自Firefox3.6）： 图片：144940pb8zmd08t5j0v53b.jpg 三、那么IE浏览器呢？ 对于目前对CSS3支持如狗屎的孤芳自赏的IE浏览器怎么办呢？box-shadow属性对于IE浏览器就像是圣诞树上的彩灯——装饰而已。 好在IE浏览器有个IE shadow滤镜，是IE浏览器私有的一个东西，可以模拟还凑合的盒阴影效果，使用类似于下面的代码： [size=3].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');
}[/size]将shadow这个class应用到图片上，结果如下（截自IE6浏览器）： 图片：144940pb8zmd08t5j0v53b.jpg 虽然效果不及Firefox，chrome等现代浏览器，但是还能凑合着用用。 四、样式综合 如下代码： [size=3].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');
}[/size][size=3] [/size] 五、浏览器支持情况 [*]Firefox 3.5+ [*]Safari 3+ Chrome [*]Opera 10.50 [*]Internet Explorer 5.5 [/td][/tr] |
|
