CSS filter 生成不规则边框.md

以前作过不少特殊的布局，好比在这两篇文章 CSS 实现优惠券的技巧 、CSS 实现支持渐变的提示框（tooltips），以下

可是一直有一个痛点就是：没法给这些图形加上边框

今天带来一个小技巧：利用 drop-shadow 一行代码搞定全部不规则边框

1、投影

这里须要利用投影 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如何生成边框呢？

2、多重投影

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;
}

线上示例可访问 coupon-border，还有这个 tooltips-border

3、使用和局限

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

还有这样的

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

不过这里须要注意的是，通过 mask 裁剪的图形须要在外层嵌套一层父级，否则投影会被 mask 直接裁剪掉

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

另外，这个方案进适合比较小的边框，若是较大的边框，可能会比较圆滑，并且须要叠加更多的滤镜，效果也不太好，以下

这些就须要自行取舍了（通常状况下不会有太粗的边框）

4、总结和说明

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

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

可能大部分同窗最后可能仍是会选择 “切图.png”，不过这也算是一个解决方案 ，多一种方案老是没错的。最后，若是以为还不错，对你有帮助的话，欢迎点赞、收藏、转发❤❤❤