css实现跨浏览器的盒阴影效果告别图片实现类似

一、无关紧要碎碎念
在web页面的ui表现中，投影效果可以说是非常常见的一种表现效果了。
然而，在CSS2的时代，我们多半使用图片实现类似效果，或是使用CSS其他属性模拟阴影效果，但是，现在，CSS3的崛起使得这个问题已经不再是是个问题了，本文就将展示如何实现跨浏览器的盒阴影效果。

二、标准方法
标准方法当然就是指使用CSS3的方法了，这个应该不少同行应该知道，参见如下代码：


释义为：横向偏移3像素，纵向偏移3像素，模糊4像素，颜色为纯黑。
如果我们把含上面样式的这个class shadow应用到图片上，就会产生如下的效果（截自Firefox3.6）： 

 
三、那么IE浏览器呢？
对于目前对CSS3支持如狗屎的孤芳自赏的IE浏览器怎么办呢？box-shadow属性对于IE浏览器就像是圣诞树上的彩灯——装饰而已。
好在IE浏览器有个IE shadow滤镜⤴，是IE浏览器私有的一个东西，可以模拟还凑合的盒阴影效果，使用类似于狼蚁网站SEO优化的代码：


将shadow这个class应用到图片上，结果如下（截自IE6浏览器）：
 
虽然效果不及Firefox，chrome等现代浏览器，但是还能凑合着用用。

四、样式综合
如下代码：