被低估的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 的效果：

使用 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的 状况，也许你能够在你的下一个项目中使用它！