如果您熟悉CSS，您可能知道box-shadow财产。但你知道有个CSS过滤器吗drop-shadow，那做类似的事？喜欢box-shadow，我们可以传递x-偏移、y-偏移、模糊半径和颜色的值：
.my-element {
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}
不像box-shadow，它不需要spread参数(稍后详细介绍)。
为什么投影有用？
如果我们有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 :
使用box-shadow给我们一个矩形阴影，即使元素没有背景，而drop-shadow创建图像的非透明部分的阴影。
无论图像在HTML中是内联的(作为内联SVG，还是在<img>标记)，或CSS背景图像。这意味着我们也可以在渐变背景中添加一个阴影。这些形状是用背景梯度创建的，drop-shadow应用过滤器：
剪裁元素
如果我们用clip-path或mask-image，任何box-shadow我们添加也将剪裁-所以它将是无形的，如果它是外部的剪裁区域。
但是，我们可以通过应用drop-shadow筛选元素的父元素。挺酷的！
.parent-element {
filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
}
.clipped-element {
clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, , 50% 50%))
}
分组元素
有时，我需要构建由重叠元素组成的组件，这些组件本身需要投下阴影。
如果我们添加一个box-shadow对于整个组件，我们将留下奇怪的空白：
如果我们添加一个box-shadow对于每个元素，每个元素都会投下自己的影子，这可能不是期望的效果。我们需要使用一些巧妙的CSS来隐藏那些元素重叠的阴影。
但通过使用drop-shadow在整个组件上，我们将阴影精确地放在我们想要的位置，而无需求助于黑客：
前端职业规划 - 作为面试官筛选简历的一些技巧 - 简书 www.jianshu.com/p/24c738373…
多重阴影
这里有一件有趣的事情：你可以使用多个阴影为一些相当酷的效果！查看下面的演示。
(附带注意：转换和动画CSS过滤器不是特别的性能，最好避免在实际项目中一次激活这么多过滤器。不过，这个只是为了好玩！)
局限性
如上所述，drop-shadow不包括spread参数。这意味着我们目前无法使用它来创建一个大纲效果，我认为这将是非常有用的。例如，如果支持它，我们可以使用drop-shadow要在渐变背景上创建大纲，请尽我们所能box-shadow或text-shadow其他元素。
格查斯
drop-shadow不会呈现与box-shadow，即使给出相同的参数。box-shadow倾向于给人更深、更重的阴影drop-shadow当使用相同的值时。我怀疑这与基于SVG过滤器原语的CSS过滤器有关。不管是什么情况，您可能需要通过调整您的drop-shadow多少有点价值。
浏览器支持
CSS过滤器(包括drop-shadow)在所有现代浏览器中都支持。我倾向于将其用作渐进增强，而不需要对旧浏览器进行变通，因为它通常不会对用户体验产生任何重大影响。但是，如果您确实需要为旧浏览器提供可选样式，则可以使用一个功能查询(通过box-shadow撤退：
.my-element > * {
box-shadow: 0 0.2rem 0.25rem rgba(0, 0, 0, 0.2);
}
@supports (filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2))) {
.my-element {
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}
.my-element {
box-shadow: none;
}
}
结语
尽管有出色的支持，drop-shadow过滤器的利用率很低.我希望这篇文章突出了一些案例，它可以帮助您在box-shadow-也许你可以在下一个项目中用到它！
前端职业规划 - 作为面试官筛选简历的一些技巧 - 简书 www.jianshu.com/p/24c738373…
