比如这两篇文章，CSS实现优惠券，CSS实现tooltips，支持渐变，如下，但是一直有个痛点：不能给这些图形加边框，今天带来一个小技巧：使用drop-shadow来搞定一行代码实现所有不规则边框1.投影这里需要用到阴影投影。不太了解的可以参考这篇文章：被低估的CSS滤镜镜像：drop-shadow，这里简单介绍一下语法其实很简单的filter：drop-shadow(offset-xoffset-yblur-radiuscolor)不是一个单独的属性，而是filter滤镜下的一个方法，这里offset-x，offset-y是偏移量，blur-radius是模糊半径，color是投影颜色。实际效果是可以模拟真实世界的投影（透明部分不会投影），区别如下遗憾的是，虽然和box-shadow类似，但是缺少扩展半径。试想一下，如果支持扩展半径，是不是很容易做出不规则的边框（应该不支持，因为现实世界的投影是没有扩展半径的）？那么，阴影是如何产生边框的呢？2.多重投影box-shadow可以轻松实现多重投影box-shadow:003px#333,1px1px5px#666,...可以无限叠加。但是drop-shadow是不行的，比如filter:drop-shadow(003px#333,1px1px5px#666,...)，可以看到浏览器直接认为不合法，但是可以改一下思路，虽然drop-shadow不支持，但是filter支持多个滤镜，所以filter可以这样实现：drop-shadow(003px#333)drop-shadow(003px#333)drop-shadow(003px#333)...这样就生效了，是不是有点像边框？如果只设置0.5px的模糊，多叠加几次，模糊的部分会变得更清晰。这有点像柔和的笔触。多划几下，就会变得更清晰，这样就可以得到这样的效果，而且会更接近，实际中可能需要微调，完美解决（重点来了~）.wrap{filter:阴影（0px0px0.5px#333）阴影（0px0px0px#333）阴影（0px0px0px#333）阴影（0px0px0px#333）阴影（0px0px0px#333)}这样实现的边框足够清晰，基本可以日常使用。这段代码有很多颜色。可以优化，投影颜色默认跟随当前文字颜色，所以可以简化为.wrap{filter:drop-shadow(000.5px)drop-shadow(000)drop-shadow(000)drop-shadow(000)drop-shadow(000);color:#333;}网上的例子可以访问coupon-border,和thistooltips-border3.使用和限制使用方法很简单，在容器的最外层添加这行CSS即可。比如之前的优惠券例子，得到的边框效果还不错，几乎没有投影。不过这里要注意，mask裁剪出来的图形需要在外层嵌套一层parent，否则投影会直接被mask裁掉
