有趣的！不规则边框生成方案

时间：2023-03-30 19:29:49 CSS

本文将介绍一个用SVG滤镜给各种不规则图形添加边框的技巧。本文完整DEMO可以点这里：透明和SVGfeMorphology滤镜生成不规则边框需求背景，给不规则图形添加边框在我们日常开发中，会遇到一些非矩形非圆形的图案，时间长了时间。类似如下：使用纯CSS，加上一些技巧，是可以做出上面的图形的，当然这只是第一步的要求。紧接着，可能会有要求给上面的图形加上边框。这时候CSS就很难做了。尝试使用阴影添加边框。第一种方法，我们可以尝试使用drop-shadow给不规则的图形添加外阴影。下面以一个箭头图形为例，使用CSS来简单实现一下。其中一种方式如下：

.arrow-button{position:relative;宽度：180px；高度：64px；背景：#f49714；＆::之后{内容：“”;位置：绝对；宽度：32px；高度：64px；顶部：0；右：-32px；背景：线性渐变（-45deg，透明0，透明22px，#f4971422px，#f49714100%），线性渐变（-135deg，透明0，透明22px，#f4971422px，#f49714100%）；背景大小：32px32px；背景重复：不重复；背景位置：0底部，0顶部；}}通过给.arrow-button加上一个drop-shadow，我们可以给不规则图形加上阴影，效果如下：.arrow-button{...filter:drop-shadow(0px0px2px#000);...}drop-shadow方案的局限性使用drop-shadow方案的局限性在于drop-shadow只能对不规则的图形产生阴影，不能产生无模糊的边框效果。上面的图形加了drop-shadow的效果如下，比我们想要的实体边框不模糊还是差了点：使用SVGfeMorphology滤镜加边框，我们也可以换个思路，复制一个原始图形，然后把它放大一点，把圆点改成边框的颜色，然后把两个图形叠加在一起，生成一个不规则的带边框的图形。CSS也有放大元素的能力transform:scale()，但是实现一个原始图形本身的代码可能已经很复杂了，再添加一个可能显得不够优雅，所以我们不得不另辟蹊径，寻找其他类似的实现。在这里，我们尝试使用SVG的feMorphology过滤器为不规则形状添加边框。如果你对SVG过滤器不是很了解，你可以简单地阅读我的这篇文章：有趣！强大的SVG滤镜简单介绍feMorphology滤镜feMorphology滤镜feMorphology是一个形态学滤镜，它的输入源通常是图形的alpha通道，它的两个操作可以使源图形腐蚀（细化）或膨胀（粗体）。使用属性运算符来确定是腐蚀还是膨胀效果。用属性radius来表示效果的程度，可以理解为描边的大小。operator:erodecorrosionmode,dilate为扩张模式，默认为eroderadius:strokesize，接受一个数字，表示在该模式下效果的程度，默认为0我们简单的给文字加上这个滤镜看看效果：

普通文本

p{字体大小:64px;}.dilate{filter:url(#dilate);}.erode{filter:url(#erode);}效果如下：最左边是普通文字，中间是展开模式，右边一个是腐蚀模式，看效果，很容易理解：利用feMorphology的扩展能力给不规则图形添加边框利用feMorphology的扩展能力，我们可以提前准备一个SVGfeMorphologyfilter，作用如前所述上图：复制一个原始图形，然后将其放大一点并更改为边框的颜色，然后将两个图形叠加在一起，生成一个带边框的不规则图形。而且SVG滤镜可以很方便的通过CSSFilter的url方式引入到不同的图形中，复用性非常高。这个过滤器的简单代码如下：简单分析一下这段SVG滤镜代码：以原图不透明部分为输入，采用dilate扩展方式，度数为radius="1",生成一个比原图大1px的黑块，用feMerge把黑块和原图叠加我们还是在上面的.arrow-button上加一个cssfilterfilter:url(#outline)导入我们的SVG创建过滤器：.arrow-button{...过滤器：url（#outline）;...}url是CSS过滤器属性的关键字之一，url模式是CSS过滤器提供的能力之一，允许我们引入特定的SVG过滤器，这大大增强了过滤器在CSS中的能力。看效果：哇，这下成功了。通过feMorphology滤镜，我们成功的给不规则图形添加了边框效果。我可以通过控制filter中的radius="1"来控制边框的大小。然后把上面的滤镜套在各种不规则的图形上，看看效果：效果还不错，就是颜色偏黑。如果我们想让边框的颜色是另一种颜色，有没有办法呢？使用feFlood和feComposite改变边框颜色通过feFlood和feComposite这两个SVG滤镜，可以给生成的瓦片赋予不同的颜色，代码如下：

通过feFlood中的flood-color="green"可以控制生成的边框（tile）的颜色，这里设置为绿色。应用于各个图形的效果如下：至此，我们实现了通过SVG滤镜为不规则图形添加不同颜色的边框。完整的DEMO可以点击这里：transparentandSVGfeMorphologyfiltertogenerateirregularborders简单总结一下：使用drop-shadow可以给不规则图形添加阴影，但是不能给没有Fuzzyborders的不规则图形添加实体使用feMorphologySVG滤镜为不规则图形添加边框效果。可以通过控制radius="1"来调整边框的大小。在feFlood和feComposite过滤器的帮助下使用feMorphology来更改边框颜色。通过CSSFilter的url模式，可以快速的将SVG过滤器引入到HTML元素中，比如filter:url(#outline)值得注意的是，由于图形的高宽不是1:1，而dilate模式feMorphology的不会和元素的高宽Expansion成正比，所以生成的边框不一定到处都是统一的，feMorphology的radius属性可以传入两个值，用空格隔开，分别代表水平和垂直的展开尺寸，可以在实际使用中进行微调。最后，这篇文章更多的是提供一个生成不规则边框的思路。当然，这种情况下，大部分还是会以切图为主，但多了解一个可行的方法也不是坏事。好了，本文到此结束，一个简单的小技巧，希望对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS，持续更新中。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。