被低估的CSS滤镜：drop-shadow
时间：2023-03-31 01:20:06
CSS
首发于公众号《前端全栈开发者》，第一时间阅读最新文章，这两天会优先发布新文章。关注后私信回复：大礼包，免费送某网优质视频课程网盘素材，绝对让你省钱！如果你熟悉CSS，你可能知道box-shadow属性。但是你知道有一个CSS过滤器阴影可以做类似的事情吗？就像box-shadow一样，我们可以输入x-offset、y-offset、blurradius和color的值。.my-element{filter:drop-shadow(00.2rem0.25remrgba(0,0,0,0.2));}与box-shadow不同，它不需要spread参数（稍后会详细介绍）。为什么投影有用？如果我们有box-shadow为什么还需要drop-shadow？在非矩形形状上使用阴影允许我们向与其边界框不对应的元素添加阴影，而是使用元素的alpha掩码。例如，我们可以为透明的PNG或SVG徽标添加阴影。img{filter:drop-shadow(0.35rem0.35rem0.4remrgba(0,0,0,0.5));}我们可以比较box-shadow和drop-shadow的效果：使用box-shadow给我们一个矩形阴影，即使元素没有背景，并且drop-shadow会为图像的非透明部分创建阴影。演示无论图像是内联在HTML中（作为内联SVG，或在![]()
标签中）还是CSS背景图像，这都将起作用，这意味着我们还可以向渐变背景添加阴影。这些形状是使用背景渐变和应用的投影滤镜创建的：
.grad{宽度：15rem;高度：15rem；保证金：1rem；背景：线性渐变（45deg，深粉色50%，透明50%）；filter:drop-shadow(0.6rem0.6rem1remrgba(20,20,180,0.8));}.grad:nth-child(2){background:radial-gradient(circleatcenter,deeppink50%,透明50%);}.grad:nth-child(3){background:linear-gradient(45deg,transparent60%,deeppink60%),linear-gradient(135deg,transparent60%,deeppink60%);}效果裁剪元素如果我们使用clip-path或mask-imagetrim或mask元素，我们添加的任何box-shadow也将被裁剪-所以如果它在裁剪区域之外，它将不可见。但是我们可以通过在元素的父元素上应用投影滤镜来在被剪切的元素上创建阴影。很酷！父元素{过滤器：投影（0.35rem0.35rem0.4remrgba（0、0、0、0.5））；}.clipped-element{剪辑路径：多边形（00、50%0、100%50%,50%100%,0100%,,50%50%))}阴影滤镜应用于剪切形状的父元素。查看演示GroupingElements有时我需要构建由重叠元素组成的组件，这些元素本身需要投射阴影。如果我们在整个组件上添加box-shadow，我们会留下奇怪的空白：如果我们单独为每个元素添加box-shadow，那么每个元素都会投射自己的阴影，这可能不是我们想要的效果。我们需要使用一些巧妙的CSS来隐藏这些元素的重叠阴影。但是通过在整个组件上使用drop-shadow，我们可以在我们想要的地方准确地获得阴影，而无需诉诸魔术。查看演示MultipleShadows这是一件有趣的事情：您可以使用多个阴影来获得一些很酷的效果！查看下面的演示。
.parent-element{过滤器：drop-shadow(10rem00rgba(0,30,200,0.8))阴影(-10rem00rgba(0,30,200,0.8))阴影(20rem00rgba(0,30,200,0.8))阴影(-20rem00rgba(0,30,200,0.8));过渡：过滤600毫秒；}.parent-element:hover{过滤：drop-shadow(000rgba(0,30,200,0.8));}.clipped-element{width:20rem;高度：20rem；保证金：0自动；背景色：深粉色；clip-path:polygon(00,50%0,100%50%,50%100%,0100%,50%50%)}效果：附带说明：过渡和动画CSS滤镜表现不佳好吧，在实际项目中，最好不要同时为这么多滤镜设置动画。但这只是为了好玩！限制如上所述，阴影不包含扩展参数。这意味着我们目前不能用它来创建剪影效果，我认为这会非常有用。例如，如果它被支持，我们可以使用drop-shadow在渐变背景上创建轮廓，就像我们在其他元素上使用box-shadow或text-shadow一样。Gotchadrop-shadow即使给定相同的参数也无法呈现与box-shadow完全相同的阴影效果。我怀疑这与基于SVG过滤器基元的CSS过滤器有关。在任何一种情况下，您都可能需要通过稍微调整阴影值来补偿差异。浏览器支持所有现代浏览器都支持CSS过滤器（包括阴影）。我倾向于认为这是一种渐进式增强，不需要针对旧浏览器的解决方法，因为它通常不会对用户体验产生任何重大影响。但是如果你确实需要为旧浏览器提供替代样式，你可以使用功能查询来实现，并使用box-shadow回退。.my-element>*{box-shadow:00.2rem0.25remrgba(0,0,0,0.2);}@supports(filter:drop-shadow(00.2rem0.25remrgba(0,0,0,0.2))){.my-element{filter:drop-shadow(00.2rem0.25remrgba(0,0,0,0.2));}.my-element>*{box-shadow:none;}}总结尽管得到了很好的支持，阴影过滤器仍然没有得到充分利用。我希望这篇文章突出了box-shadow的一些用例，也许你可以在下一个项目中使用它！
