在CSS3中,box-shadow和filter:drop-shadow,都能实现阴影效果。乍看之下几乎没有任何区别:Demo1,可事实上并非如此。

最常见的情况,不知各位有没遇到过在某个带阴影的元素上,通过伪类添加一个箭头。此时会遇到一个蛋疼的情况,那就是所添加的箭头没有阴影。对此,我们通常会理解为这是两个“元素”所以没有很正常,但如果再给这箭头添加阴影,可能会导致两个元素的阴影重叠,影响效果。而filter:drop-shadow的最大优点,就是能够识别一个元素的轮廓和透明度:Demo2

接着,为了有个更为直观的了解,我们来看下filter:drop-shadow在PNG透明图片下的效果:Demo3

最后,filter:drop-shadow还处于一个实验性和讨论性的阶段,仅在chrome 21+、Safari 6、ios 6下的Safari中支持。至于其他的浏览器(IE、firefox、Opera...)还是继续乖乖的用box-shadow吧。所以,这仅仅是一个讨论话题,在以后个大浏览器都支持该属性的时候,才能发挥其真正的功效。但个人认为对CSS3 filter的支持可能是以后的一个趋势,毕竟还是很不错的。

参考文章:box-shadow vs filter: drop-shadow