关于前端:被低估的CSS滤镜dropshadow

首发于公众号《前端全栈开发者》，第一工夫浏览最新文章，会优先两天发表新文章。关注后私信回复：大礼包，送某网精品视频课程网盘材料，准能为你节俭不少钱！

如果你相熟 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 的成果：

应用 box-shadow 为咱们提供了一个矩形暗影，即便元素没有背景，而 drop-shadow 则为图像的非通明局部创立暗影。

Demo

无论图像是内联在 HTML 中（作为内联 SVG，还是在 <img> 标签中）或 CSS 背景图像，这都将起作用，这意味着咱们还能够为突变背景增加暗影。这些形态是通过背景突变创立的，并利用了 drop-shadow 滤镜：

<div class="grad"></div>
<div class="grad"></div>
<div class="grad"></div>

.grad {
  width: 15rem;
  height: 15rem;
  margin: 1rem;
  background: linear-gradient(45deg, deeppink 50%, transparent 50%);
  filter: drop-shadow(0.6rem 0.6rem 1rem rgba(20, 20, 180, 0.8));
}

.grad:nth-child(2) {background: radial-gradient(circle at center, deeppink 50%, transparent 50%);
}

.grad:nth-child(3) {background: linear-gradient(45deg, transparent 60%, deeppink 60%), linear-gradient(135deg, transparent 60%, deeppink 60%);
}

成果

剪裁元素

如果咱们应用 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%))
}

drop-shadow 滤镜利用于剪切形态的父元素。

查看 demo

分组元素

有时候，我须要构建由重叠元素组成的组件，这自身就须要投射暗影。

如果咱们在整个组件上增加 box-shadow，则会留下奇怪的空白区域：

如果咱们给每个元素独自增加一个 box-shadow，那么每个元素都会投下本人的暗影，这可能不是咱们想要的成果。咱们须要采纳一些奇妙的 CSS 来暗藏那些元素重叠的暗影。

然而通过在整个组件上应用 drop-shadow，咱们能够精确地在咱们想要的中央失去暗影，而不须要求助于奇技淫巧。

查看 demo

多重投射暗影

这是一件乏味的事件：你能够应用多个暗影以取得一些很酷的成果！查看以下演示。

<div class="parent-element">
  <div class="clipped-element"></div>
</div>

.parent-element {filter: drop-shadow(10rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(-10rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(20rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(-20rem 0 0 rgba(0, 30, 200, 0.8));
  transition: filter 600ms;
}

.parent-element:hover {filter: drop-shadow(0 0 0 rgba(0, 30, 200, 0.8));
}

.clipped-element {
  width: 20rem;
  height: 20rem;
  margin: 0 auto;
  background-color: deeppink;
  clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%)
}

成果：

附带阐明：过渡和动画 CSS 滤镜的性能并不是特地好，在理论我的项目中可能最好不要同时制作这么多滤镜的动画。不过这个只是为了好玩！

局限性

如上所述，drop-shadow 不蕴含 spread 参数。这意味着咱们目前无奈应用它来创立轮廓成果，我认为这将十分有用。例如，如果它被反对，咱们能够应用 drop-shadow 在突变的背景上创立一个轮廓，就像咱们在其余元素上应用 box-shadow 或 text-shadow 一样。

陷阱

即便给定雷同的参数，drop-shadow 也无奈渲染与 box-shadow 完全相同的暗影成果。我狐疑这与 CSS 过滤器是基于 SVG 过滤器原语无关。无论哪种状况，你都可能须要通过略微调整 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 的 状况，兴许你能够在你的下一个我的项目中应用它！