css矩形凹陷效果_被低估的CSS滤镜：drop-shadow

来源：公众号《前端全栈开发者》

如果你熟悉CSS，则可能了解 box-shadow 属性。但是你知道有一个CSS滤镜 drop-shadow 可以做类似的事情吗？就像 box-shadow 一样，我们可以输入x-offset、y-offset、模糊半径和颜色的值。

.my-element {  filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));}

与 box-shadow 不同，它不需要 spread 参数(稍后会详细介绍)。

为什么drop-shadow很有用？

如果我们有 box-shadow ，为什么还需要 drop-shadow 呢？

/ 非矩形形状 /

使用 drop-shadow 可以让我们给一个元素添加阴影，这个阴影并不对应于它的边界框，，而是使用该元素的Alpha蒙版。例如，我们可以在透明的PNG或SVG徽标中添加投影。

img {  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));}

我们可以比较 box-shadow 和 drop-shadow 的效果：