CSS3 filter滤镜drop-shadow方法生成不规则边框

利用 drop-shadow 一行代码搞定所有不规则边框。

一、投影

这里需要利用投影 drop-shadow， 不太了解的可以参考 这篇文章: CSS 滤镜：drop-shadow，这里简单介绍一下。

语法：

filter: drop-shadow(offset-x offset-y blur-radius color)

并不是一个单独的属性，而是 filter 滤镜下的一个方法

这里 offset-x、 offset-y为偏移量，blur-radius为模糊半径，color为投影颜色。实际作用就是可以模拟真实世界的投影（透明的部分不会投影），区别如下：

可惜的是，虽然和 box-shadow 比较类似，但是少了扩展半径。试想一下，如果支持了扩展半径，那不规则边框是不是很容易了（应该不会支持了，因为真实世界的投影也没有扩展半径）？

那么，drop-shadow如何生成边框呢？

二、多重投影

box-shadow 可以很轻易的实现多重阴影：

box-shadow: 0 0 3px #333, 1px 1px 5px #666, ...

可以无限叠加下去。

但是，drop-shadow可就不行了，比如：

filter: drop-shadow(0 0 3px #333, 1px 1px 5px #666, ...)

可以看到浏览器直接认为非法了

不过可以换一种思路，虽然 drop-shadow不支持，但是filter支持多种滤镜，所以可以这样来实现：

filter: drop-shadow(0 0 3px #333) drop-shadow(0 0 3px #333) drop-shadow(0 0 3px #333)...

这样就可以生效了:

是不是有点像边框了？如果只设置 0.5px 的模糊，多叠加几次，模糊的部分会变清晰，这个就有点像一个比较软的笔触，多画几笔就变清晰了，于是可以得到这样的效果:

这样就更加接近了，实践下来，可能需要微调，这里给出一个比较完美的方案（重点来了~）

.wrap{
  filter: drop-shadow(0px 0px 0.5px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333)
}

这样实现的边框已经足够清晰，基本可以日常使用了

这段代码中颜色比较多，可以优化一下，投影的颜色默认是跟随当前文字颜色的，所以可以简化为

.wrap{
  filter: drop-shadow(0 0 0.5px)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0)drop-shadow(0 0 0);
  color: #333;
}

完整代码：

<div class="wrap">
  <div class="content"></div>
</div>

/* CSS */
html{
  height:100%;
}
body{
  height:100%;
  display:flex;
  margin:0;
}
.wrap{
  width: 300px;
  height: 150px;
  min-width: 100px;
  min-height: 100px;
  margin: auto;
  overflow: auto;
/*   resize: both; */
  filter: drop-shadow(0px 0px 0.5px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333)
}
.content {
  height: 100%;
  margin: auto;
  -webkit-mask: radial-gradient(circle at 20px 20px, transparent 20px, red 21px) -20px -20px; 
  background: linear-gradient(45deg, orange, red);
}

效果如下：

tooltips：

<tips>this is tooltips!</tips>

<tips>this is new tooltips!</tips>
/* CSS */
html,body{
  height: 100%;
  margin:0;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

tips{
  position: relative;
  --bg: linear-gradient(45deg, #ff3c41, #ff9800);
  padding: 0.5em 0.8em calc(0.5em + 5px);
  color: #fff;
  filter: drop-shadow(0px 0px 0.5px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333)
}
tips::before,tips::after{
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--bg);
  z-index: -1;
  
}
tips::before{
  clip-path: inset(0 0 5px 0 round 5px);
}
tips::after{
  clip-path: polygon(calc(50% - 5px) calc(100% - 5px), calc(50% + 5px) calc(100% - 5px), 50% 100%);
}

效果如下：

三、使用和局限

使用方式简单，在容器的最外层加上这一行 CSS 就行了，比如类似的优惠券例子，得到的边框效果这样的

还有这样的：

边框还算不错，几乎看不出投影

不过这里需要注意的是，经过 mask 裁剪的图形需要在外层嵌套一层父级，不然投影会被 mask 直接裁剪掉。

<div class="wrap">
  <div class="coupon">
   <!--优惠券--> 
  </div>
</div>

另外，这个方案更适合比较小的边框，如果较大的边框，可能会比较圆滑，而且需要叠加更多的滤镜，效果也不太好，如下：

这些就需要自行取舍了（一般情况下不会有太粗的边框）

四、总结和说明

本文介绍了一个实现不规则边框的通用方案，成本非常低，效果也非常不错，这里总结一下：

1. drop-shadow只会对不透明部分生成投影，符合真实物理世界
2. drop-shadow不支持多重投影，filter支持多重滤镜，可以间接实现多重投影
3. 边框的实现原理是投影的多重叠加
4. 有些通过mask裁剪生成的图形，需要在外包裹一层容器，再生成边框
5. 适合比较小的边框，过大的边框不太理想
6. 滤镜其实是一个比较耗费性能的属性，不适合太范围使用