本文将介绍一个用SVG滤镜给各种不规则图形添加边框的技巧。本文完整DEMO，可以点击这里：透明和SVGfeMorphology滤镜生成不规则边框【1】需求背景，给不规则图形添加边框在我们日常开发中，经常会遇到一些非矩形非圆形的图形图案.类似如下：不规则图形示例使用纯CSS，加上一些技巧，是可以做出上面的图形的，当然这只是第一步的要求。紧接着，可能会有要求给上面的图形加上边框。这时候CSS就很难做了。尝试使用阴影添加边框。第一种方法，我们可以尝试使用drop-shadow给不规则的图形添加外阴影。下面以一个箭头图形为例，使用CSS来实现。其中一种方式如下："";position:absolute;width:32px;height:64px;top:0;right:-32px;background:linear-gradient(-45deg,transparent0,transparent22px,#f4971422px,#f49714100%),linear-gradient(-135deg,transparent0,transparent22px,#f4971422px,#f49714100%);background-size:32px32px;background-repeat:no-repeat;background-position:0bottom,0top;}}no有边框的不规则图形我们可以给不规则图形加上阴影通过向.arrow-button添加阴影来显示图形。效果如下：.arrow-button{...filter:drop-shadow(0px0px2px#000);...}drop-shadow实现的带有阴影边框的不规则图形Drop-shadowscheme的局限性使用的局限性drop-shadow方案是drop-shadow只能对不规则的图形产生阴影，没有Blurredborder效果不能产生阴影。上面的图形加上drop-shadow的效果如下，比我们想要的没有模糊边框的实体还是差了一点：drop-shadow实现的带有阴影边框的不规则图形使用SVGfeMorphologyfilter添加边框。我们也可以换个思路，复制一个原始图形，然后放大一点改变边框的颜色，然后将两个图形叠加在一起，生成一个不规则的带边框的图形。CSS也有放大元素的能力transform:scale()，但是实现一个原始图形本身的代码可能已经很复杂了，再添加一个可能显得不够优雅，所以我们不得不另辟蹊径，寻找其他类似的实现。在这里，我们尝试使用SVG的feMorphology过滤器为不规则形状添加边框。如果你对SVG滤镜不太了解，可以快速浏览一下我的词条：有趣！强大的SVG滤镜[2]简单介绍一下feMorphology滤镜。feMorphology过滤器是形态过滤器。它的输入源通常是图形的alpha通道，对其进行两次操作可以腐蚀（变薄）或膨胀（变厚）源图形。使用属性运算符来确定是腐蚀还是膨胀效果。用属性radius来表示效果的程度，可以理解为描边的大小。operator:erodecorrosionmode,dilate为扩张模式，默认为eroderadius:strokesize，接受一个数字，表示在该模式下效果的程度，默认为0我们简单的给文字加上这个filter看看效果： NormalText
