CSS3 不规则投影（filter:drop-shadow）滤镜

查看图片代码

通过这张图，可以很明显的看见这两个投影的差别。
box-shadow会忽视透明部分。

这类情况包括：

• 半透明图像、背景图像、或者 border-image；
• 元素设置了点状，虚线或半透明的边框，但没有背景（或者当 background-clip 不是 border-box时）；
• 对话气泡，它的小尾巴通常是用伪元素生成的；
• “切角效果”；
• 折角效果；
• 通过clip-path 生成的形状。

filter:drop-shadow属性是从SVG那里借来的，尽管CSS滤镜基本上就是SVG滤镜，但我们并不需要掌握任何SVG知识，就可以对此属性加以利用。
drop-shadow（）滤镜可以接受的参数基本上跟 box-shadow属性是一样的，但不包括扩张半径、不包括 inset 关键字，也不支持逗号分隔的多层投影语法。
它们写法的不同：

 box-shadow: 4px 4px 4px #fce;

filter: drop-shadow(4px 4px 4px #fce);

CSS滤镜最大的好处在于，它们可以平稳退化：当浏览器不支持时，不会出现问题，只不过没有任何效果而已。

filter: drop-shadow 另一件不容忽视的事情就是：任何非透明的部分都会被一视同仁地打上投影，包括文本（如果背景是透明的）。而且并不能被：text-shadow:none; 取消掉文字的投影。如果你已经为上过投影了，那它将被打上两层投影。

text-shadow:4px 4px #fff;
filter: drop-shadow(4px 4px 2px #fce);

---

参考书籍：Lea Verou《CSS揭秘》