本文将介绍一种配合 SVG 滤镜实现各种不规则图形添加边框的小技巧。
本文完整的 DEMO,你可以戳这里:transparent 配合 SVG feMorphology 滤镜生成不规则边框 [1]
需求背景,给不规则图形添加边框
在我们日常开发中,时常会遇到一些非矩形、非圆形的图案。类似下面这些:
不规则图形示例
使用纯 CSS,搭配一些技巧,是可以制作出上面的图形的,当然这只是需求的第一步。
紧接着,可能会有要给上述图形添加边框的诉求,这个时候,CSS 就很难办到了。
尝试使用 drop-shadow 添加边框
第一种方法,我们可以尝试使用 drop-shadow,给不规则的图形,添加一个外阴影。
我们以一个箭头图形为例使用 CSS 简单实现它的其中一种方式如下:
- <div class="arrow-button"></div>
- .arrow-button {
- position: relative;
- width: 180px;
- height: 64px;
- background: #f49714;
- &::after {
- content: "";
- position: absolute;
- width: 32px;
- height: 64px;
- top: 0;
- right: -32px;
- background:
- linear-gradient(-45deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%),
- linear-gradient(-135deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%);
- background-size: 32px 32px;
- background-repeat: no-repeat;
- background-position: 0 bottom, 0 top;
- }
- }
不带边框的不规则图形
我们通过给 .arrow-button 添加一个 drop-shadow,可以实现给不规则图形添加一个阴影,效果如下:
- .arrow-button {
- ...
- filter: drop-shadow(0px 0px 2px #000);
- ...
- }
drop-shadow 实现的带阴影边框的不规则图形
drop-shadow 方案的局限性
使用 drop-shadow 方案的局限性在于,drop-shadow 只能对不规则图形生成阴影,无法生成不带模糊的边框效果。
上述图形添加 drop-shadow 的效果如下,与我们想要的实体不带模糊的边框还是差了一点:
drop-shadow 实现的带阴影边框的不规则图形
使用 SVG feMorphology 滤镜添加边框
我们还可以换个思路,复制一个原图形,再将其稍微放大一点点改变为边框的颜色,然后两个图形叠加在一起,就能够生成一个带边框的不规则图形了。
CSS 中也有能够放大元素的能力 transform: scale(),但是本身实现一个原图形的代码可能已经非常复杂了,再叠加一个可能会显得不太优雅,我们得另辟蹊径,寻找其他类似的实现方案。
这里,我们尝试使用 SVG的 feMorphology 滤镜来实现给不规则图形添加边框。
- 如果你对 SVG 滤镜还不算太了解,可以简单看看我的这篇文章入门:有意思!强大的 SVG 滤镜[2]
简单介绍下 feMorphology 滤镜
feMorphology 滤镜
feMorphology 为形态滤镜,它的输入源通常是图形的 alpha 通道,用来它的两个操作可以使源图形腐蚀(变薄)或扩张(加粗)。
使用属性 operator 确定是要腐蚀效果还是扩张效果。使用属性 radius 表示效果的程度,可以理解为笔触的大小。
- operator:erode 腐蚀模式,dilate 为扩张模式,默认为 erode
- radius:笔触的大小,接受一个数字,表示该模式下的效果程度,默认为 0
我们将这个滤镜简单的应用到文字上看看效果:
- <div class="g-text">
- <p>Normal Text</p>
- <p class="dilate">Normal Text</p>
- <p class="erode">Normal Text</p>
- </div>
- <svg width="0" height="0">
- <filter id="dilate">
- <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="3"></feMorphology>
- </filter>
- <filter id="erode">
- <feMorphology in="SourceAlpha" result="ERODE" operator="erode" radius="1"></feMorphology>
- </filter>
- </svg>
本文转载自网络,原文链接:https://mp.weixin.qq.com/s/VO1Fogz9NgesoChFq7TK5w
版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除