奇技淫巧！不规则边框的生成方案

本文将介绍一种配合 SVG 滤镜实现各种不规则图形添加边框的小技巧。

目前成都创新互联公司已为成百上千家的企业提供了网站建设、域名、网络空间、网站托管、企业网站设计、黄山区网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

本文完整的 DEMO，你可以戳这里：transparent 配合 SVG feMorphology 滤镜生成不规则边框 [1]

需求背景，给不规则图形添加边框

在我们日常开发中，时常会遇到一些非矩形、非圆形的图案。类似下面这些：

不规则图形示例

使用纯 CSS，搭配一些技巧，是可以制作出上面的图形的，当然这只是需求的第一步。

紧接着，可能会有要给上述图形添加边框的诉求，这个时候，CSS 就很难办到了。

尝试使用 drop-shadow 添加边框

第一种方法，我们可以尝试使用 drop-shadow，给不规则的图形，添加一个外阴影。

我们以一个箭头图形为例使用 CSS 简单实现它的其中一种方式如下：
 

 

 
 
 
 
    
  
  
  
  
  1. .arrow-button { 
    2. 
  
  
  
  
  2.     position: relative; 
    3. 
  
  
  
  
  3.     width: 180px; 
    4. 
  
  
  
  
  4.     height: 64px; 
    5. 
  
  
  
  
  5.     background: #f49714; 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.     &::after { 
    8. 
  
  
  
  
  8.         content: ""; 
    9. 
  
  
  
  
  9.         position: absolute; 
    10. 
  
  
  
  
  10.         width: 32px; 
    11. 
  
  
  
  
  11.         height: 64px; 
    12. 
  
  
  
  
  12.         top: 0; 
    13. 
  
  
  
  
  13.         right: -32px; 
    14. 
  
  
  
  
  14.         background:  
    15. 
  
  
  
  
  15.             linear-gradient(-45deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%), 
    16. 
  
  
  
  
  16.             linear-gradient(-135deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%); 
    17. 
  
  
  
  
  17.         background-size: 32px 32px; 
    18. 
  
  
  
  
  18.         background-repeat: no-repeat; 
    19. 
  
  
  
  
  19.         background-position: 0 bottom, 0 top; 
    20. 
  
  
  
  
  20.     } 
    21. 
  
  
  
  
  21. } 
    22.

  

不带边框的不规则图形

我们通过给 .arrow-button 添加一个 drop-shadow，可以实现给不规则图形添加一个阴影，效果如下：

 
 
 
 
    
  
  
  
  
  1. .arrow-button { 
    2. 
  
  
  
  
  2.     ... 
    3. 
  
  
  
  
  3.     filter: drop-shadow(0px 0px 2px #000); 
    4. 
  
  
  
  
  4.     ... 
    5. 
  
  
  
  
  5. } 
    6.

 

drop-shadow 实现的带阴影边框的不规则图形

drop-shadow 方案的局限性

使用 drop-shadow 方案的局限性在于，drop-shadow 只能对不规则图形生成阴影，无法生成不带模糊的边框效果。

上述图形添加 drop-shadow 的效果如下，与我们想要的实体不带模糊的边框还是差了一点：

drop-shadow 实现的带阴影边框的不规则图形

使用 SVG feMorphology 滤镜添加边框

我们还可以换个思路，复制一个原图形，再将其稍微放大一点点改变为边框的颜色，然后两个图形叠加在一起，就能够生成一个带边框的不规则图形了。

CSS 中也有能够放大元素的能力 transform: scale()，但是本身实现一个原图形的代码可能已经非常复杂了，再叠加一个可能会显得不太优雅，我们得另辟蹊径，寻找其他类似的实现方案。

这里，我们尝试使用 SVG的 feMorphology 滤镜来实现给不规则图形添加边框。

简单介绍下 feMorphology 滤镜

feMorphology 滤镜

feMorphology 为形态滤镜，它的输入源通常是图形的 alpha 通道，用来它的两个操作可以使源图形腐蚀(变薄)或扩张(加粗)。

使用属性 operator 确定是要腐蚀效果还是扩张效果。使用属性 radius 表示效果的程度，可以理解为笔触的大小。

我们将这个滤镜简单的应用到文字上看看效果：

  
 
 
 
    
   
  
  
  
  1.  
    2. 
   
  
  
  
  2.     
    Normal Text
     
    3. 
   
  
  
  
  3.     Normal Text
     
    4. 
   
  
  
  
  4.     Normal Text
     
    5.
 
  •  
  •  
  •      
  •          
  •      
  •      
  •          
  •      
  •  

    •  

     
 
 
 
      
  
  
  
  
    1. p { 
      2. 
  
  
  
  
    2.     font-size: 64px; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. .dilate { 
      5. 
  
  
  
  
    5.     filter: url(#dilate); 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7. .erode { 
      8. 
  
  
  
  
    8.     filter: url(#erode); 
      9. 
  
  
  
  
    9. } 
      10.

     

    效果如下：最左边的是正常文字，中间的是扩张的模式，右边的是腐蚀模式，看看效果，非常好理解：

    借用 feMorphology 的扩张能力给不规则图形添加边框

    利用 feMorphology 的扩张能力，我们可以提前准备好一个 SVG feMorphology 滤镜，其作用就是上述所说的：

    复制一个原图形，再将其稍微放大一点点改变为边框的颜色，然后两个图形叠加在一起，就能够生成一个带边框的不规则图形了。

    并且 SVG 滤镜可以非常简单的通过 CSS Filter 的 url 模式引入到各个不同的图形当中去，复用性非常的高。

    该滤镜的简单代码如下：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.      
      3. 
  
  
  
  
    3.          
      4. 
  
  
  
  
    4.          
      5. 
  
  
  
  
    5.              
      6. 
  
  
  
  
    6.              
      7. 
  
  
  
  
    7.          
      8. 
  
  
  
  
    8.      
      9. 
  
  
  
  
    9.  
      10.

    简单浅析一下这段 SVG 滤镜代码：

    1.将原图的不透明部分作为输入，采用了 dilate 扩张模式且程度为 radius="1"，生成了一个比原图大 1px 的黑色图块

    2.使用 feMerge 将黑色图块和原图叠加在一起

    我们还是给上述的 .arrow-button 添加一个 CSS filter filter: url(#outline)，引入我们创建的 SVG 滤镜：

     
 
 
 
      
  
  
  
  
    1. .arrow-button { 
      2. 
  
  
  
  
    2.     ... 
      3. 
  
  
  
  
    3.     filter: url(#outline); 
      4. 
  
  
  
  
    4.     ... 
      5. 
  
  
  
  
    5. } 
      6.

    url 是 CSS 滤镜属性的关键字之一，url 模式是 CSS 滤镜提供的能力之一，允许我们引入特定的 SVG 过滤器，这极大的增强 CSS 中滤镜的能力。

    看看效果：

    SVG 滤镜实现的带边框的不规则图形

    Wow，这下成功了，通过 feMorphology 滤镜，我们成功的实现了给不规则的图形添加了边框效果，我能可以通过控制滤镜中的 radius="1" 来控制边框的大小。

    再将上述滤镜运用在各种不规则图形下看看效果：

    SVG 滤镜实现的带边框的不规则图形

    效果还算可以，就是颜色是黑色的。如果我们希望边框的颜色是其他颜色，有没有办法呢?

    辅以 feFlood 和 feComposite 改变边框颜色

    通过 feFlood 和 feComposite 两个 SVG 滤镜，可以给生成的图块上不同的颜色，代码如下：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.      
      3. 
  
  
  
  
    3.          
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.          
      6. 
  
  
  
  
    6.          
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8.          
      9. 
  
  
  
  
    9.              
      10. 
  
  
  
  
    10.              
      11. 
  
  
  
  
    11.          
      12. 
  
  
  
  
    12.      
      13. 
  
  
  
  
    13.  
      14.

    通过 feFlood 中的 flood-color="green"，即可控制生成的边框(图块)的颜色，这里设置为了绿色。应用到各个图形上的效果如下：

    SVG 滤镜实现的能改变颜色的带边框的不规则图形

    至此，我们实现了通过 SVG 滤镜实现对不规则图形添加不同颜色的边框。

    完整的 DEMO，你可以戳这里：transparent 配合 SVG feMorphology 滤镜生成不规则边框 [3]

    总结一下

    简单的总结一下：

    值得注意的是，由于图形高宽不是 1:1 的，并且 feMorphology 的 dilate 模式也不会根据元素的高宽等比例的扩张，所以生成的边框是不一定在各处的均匀相等的，而 feMorphology 的 radius 属性可以传入两个值，使用空格分离，分别表示横向与纵向的扩张大小，实际使用的时候可以微调一下。

    最后

    本文更多的是提供一种不规则边框的生成方案思路，当然，具体遇到这种情况大部分还是会以切图为主，不过多了解掌握一种可行方法也不是坏事。

    好了，本文到此结束，一个简单的小技巧，希望对你有帮助 ????

    如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

    参考资料

    [1]transparent 配合 SVG feMorphology 滤镜生成不规则边框 : https://codepen.io/Chokcoco/pen/ExZPpQq

    [2]有意思!强大的 SVG 滤镜: https://github.com/chokcoco/cnblogsArticle/issues/27

    [3]transparent 配合 SVG feMorphology 滤镜生成不规则边框 : https://codepen.io/Chokcoco/pen/ExZPpQq

    分享题目：奇技淫巧！不规则边框的生成方案
    网页地址：http://www.csdahua.cn/qtweb/news36/401036.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    网页设计公司知识

    同城分类信息

    官网SEO排名　　 　正泰动物　　 　乐至网站建设　　 　成都棕树机房　　 　水泥基自流平　　 　电信机房托管　　 　成都网站设计　　 　边坡柔性防护网　　 　雕琢时光　　 　全网营销　　 　做网站的公司　　 　网站优化排名　　 　成都主机托管　　 　郫都区消防器材　　 　成都成品网站　　 　免备案虚拟主机　　 　都江堰做网站　　 　绵阳梓潼做网站　　 　成都微信开发　　 　绵阳机房托管