使用css box-shadow而不是drop-shadow有什么原因吗？

Question

假设客户端兼容性，是否存在CSS box-shadow 比 filter: drop-shadow 更可取的情况。

从文章中可以看出，drop-shadow是box-shadow的硬件加速超集。这意味着我们基本上应该始终使用drop-shadow而不是box-shadow？

- Harry

Answer 1

box-shadow和filter: drop-shadow之间只有一个区别。使用box-shadow，你可以使用内阴影，但是filter: drop-shadow不能。一切都取决于你。查看示例。

为什么更好的使用box-shadow而不是filter: drop-shadow？

• 更好的浏览器支持
• 大多数开发者使用它
• 更少的代码，更多的选项
• 您可以使用内部阴影
• 您可以使用多个阴影

此外，还有一个带有图像的示例，在这种情况下，最好使用filter: drop-shadow。第一个具有矩形阴影，但是另一个阴影遵循图像的边缘。

- Vukašin Manojlović

---

大多数要点现在已经无效。该过滤器使用元素的形状，这对于具有透明度的图像非常好。缺点是不支持扩展参数，也没有插入选项。显然，这里的比较是与text-shadow相比，两者在选项上没有区别，尽管最终结果略有不同。 - user670839

Answer 2

问题在于目前对于filter的浏览器支持有限，而box-shadow的支持更加普遍。

• filter的浏览器支持情况
• box-shadow的浏览器支持情况

- moettinger

Answer 3

另一个区别：CSS 的 filter 会创建一个新的层叠上下文，而 box-shadow 则不会。因此，如果你不想处理这个问题，可能要选择使用 box-shadow。一个关于绝对定位工具提示在 drop-shadow 和 box-shadow 卡片内的演示：https://jsfiddle.net/lexw11/uro0hqbx/137/

- lexw11