CSS filter 生成不规则边框.md 前端csscss3

之前做过很多特殊的布局，比如在这两篇文章 CSS 实现优惠券的技巧、CSS 实现支持渐变的提示框（tooltips），如下

文章图片

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

文章图片

今天带来一个小技巧：利用 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, ...)

可以看到浏览器直接认为非法了
【CSS filter 生成不规则边框.md】

文章图片

不过可以换一种思路，虽然 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) }