我之前做过很多特殊的布局。 比如这两篇文章中CSS实现了优惠券的方法，CSS实现了支持渐变的tooltips，如下
文章图片
而且仍然存在一个痛点：无法为这些图形添加边框
文章图片
明天带来一个小方法：使用drop-shadow一行代码获取所有不规则边框
1.投影 这里需要用到投影投影。 如果你不太了解，可以参考这篇文章：被高估的CSS滤镜：drop-shadow，这里简单介绍一下
虽然句型很简单
过滤器：drop-shadow(offset-xoffset-yblur-radiuscolor)
它不是一个单独的属性，而是filter过滤器下的一个方法。 这里offset-x和offset-y是倾斜量，blur-radius是模糊直径，color是投影颜色。实际作用是模拟现实世界的投影（透明部分不会投影） ，差异如下
文章图片
遗憾的是，虽然它与box-shadow类似，但缺少扩大的直径。 试想一下，如果支持扩展直径，是不是很容易做出不规则边框（不应该支持，因为现实世界的投影没有扩展直径）？
那么，drop-shadow是如何生成边框的呢？
2.多重投影box-shadow可以轻松实现多重阴影
框阴影：003px#333,1px1px5px#666,...
可无限堆叠。
然而css3边框透明，投影将不起作用，例如
滤镜:drop-shadow(003px#333,1px1px5px#666,...)
可以看到浏览器直接认为是非法的
[CSSfilter生成不规则边框.md]
文章图片
但你可以改变思维方式。 虽然drop-shadow不支持，但是filter支持多个滤镜，所以可以这样实现
过滤器：drop-shadow(003px#333)drop-shadow(003px#333)drop-shadow(003px#333)...
这会起作用
文章图片
是不是有点像边框？如果只设置0.5px的模糊，叠加几次，模糊的部分就会变得更清晰。 这有点像软刷。 多划几下就变得清晰了，就能得到这样的疗效
文章图片
这样一来，就会更加亲近。 练习后，可能需要进行微调。 这里有一个比较完美的解决方案（重点~）
.wrap{过滤器：drop-shadow(0px0px0.5px#333)drop-shadow(0px0px0px#333)drop-shadow(0px0px0px#333)drop-shadow(0px0px0px#333)drop-shadow(0px0px0px#333)}
文章图片
这样实现的边界对于日常使用来说已经足够清晰了。
这段代码有很多颜色，可以优化。 投影的默认颜色遵循当前文本颜色，因此可以简化为
.wrap{filter:drop-shadow(000.5px)drop-shadow(000)drop-shadow(000)drop-shadow(000)drop-shadow(000);颜色:#333;}
网上的例子可以访问coupon-border，这个tooltips-border
3.使用及限制使用方法很简单，只需将这行CSS添加到容器的最内层即可，如之前的优惠券示例，得到的边框效果
文章图片
和这个
文章图片
框架还不错，几乎看不到阴影
不过这里要注意的是，被蒙版剪切的图形需要在内层嵌套一个父层，否则投影会被蒙版直接剪切掉
另外，该方案适用于边框相对较小的情况。 如果边框较大的话，可能会比较平滑css3边框透明，需要叠加更多的滤镜，效果也不是很好，如下
文章图片
这个需要自己决定（一般不会有太粗的边框）
4.总结与说明 本文介绍了实现不规则边框的通用方案。 成本很低，疗效也很好。 总结如下：
投影只会在不透明部分生成投影，这与真实的化学世界相符。 Drop-shadow不支持多重投影，而filter支持多个滤镜，可以间接实现多重投影。 图形需要用一层容器包裹起来，再生的框架适合比较小的框架，过大的框架就不理想。 过滤器虽然是一个比较耗费性能的属性，但是并不适合大范围的使用。 也许大多数朋友最终都会使用它。 选择“剪切Image.png”，但这也是一种解决方案，多一个解决方案总是对的。 最后，如果您觉得不错，对您有帮助，请点赞、收藏、转发？？？
