介绍
这篇文章主要介绍CSS3 + SVG滤镜如何实现不规则边框,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>需求背景,给不规则图形添加边框
<人力资源/>
在我们日常开发中,时长会遇到一些非矩形,非圆形的图案。类似下面这些:
使用纯CSS,搭配一些技巧,是可以制作出上面的图形的,当然这只是需求的第一步。
紧接着,可能会有要给上述图形添加边框的诉求,这个时候,CSS就很难办到了。
<强>尝试使用<代码>下拉阴影>
<人力资源/>
第一种方法,我们可以尝试使用<代码>下拉阴影>
我们以一个箭头图形为例使用CSS简单实现它的其中一种方式如下:
& lt; div 类=癮rrow-button"祝辞& lt;/div> .arrow-button {
,,,位置:,相对;
,,,宽度:,180 px;
,,,身高:,64 px;
,,,背景:,# f49714;
,,,,::after {
,,,,,,,内容:,““
,,,,,,,位置:,绝对;
,,,,,,,,宽度:32像素;
,,,,,,,身高:,64 px;
,,,,,,,:,0;
,,,,,,,对的:,-32 px;
,,,,,,,背景:,
,,,,,,,,,,,线性渐变(-45度,transparent 0,, transparent 22 px,, # f49714 22 px,, # f49714 100%),
,,,,,,,,,,,线性渐变(-135度,transparent 0,, transparent 22 px,, # f49714 22 px,, # f49714 100%);
,,,,,,,background-size:, 32 px 32像素;
,,,,,,,平铺方式:,不再重演;
,,,,,,,背景位置:,0,,,0,最高;
,,,}
} 
我们通过给<代码>。箭头按钮> 下拉阴影> .arrow-button {
,,,…
,,,过滤器:,下拉阴影(0 px 0 px 2 px # 000);
,,,…
} 
<强> <代码>下拉阴影>
使用<代码>下拉阴影> 下拉阴影>
上述图形添加<代码>下拉阴影>
<强>使用SVG <代码> feMorphology 滤镜添加边框
<人力资源/> 我们还可以换个思路,复制一个原图形,再将其稍微放大一点点改变为边框的颜色,然后两个图形叠加在一起,就能够生成一个带边框的不规则图形了。
CSS中也有能够放大元素的能力:<代码>变换尺度()>
这里,我们尝试使用SVG的<代码> feMorphology 滤镜来实现给不规则图形添加边框。
简单介绍下<代码> feMorphology 滤镜
<强> feMorphology滤镜
feMorphology为形态滤镜,它的输入源通常是图形的α通道,用来它的两个操作可以使源图形腐蚀(变薄)或扩张(加粗)。
使用属性<代码>操作符确定是要腐蚀效果还是扩张效果。使用属性<代码> 半径表示效果的程度,可以理解为笔触的大小。
<李> 操作符:<代码>侵蚀腐蚀模式,<代码> 扩张为扩张模式,默认为<代码>侵蚀
<李> 半径:笔触的大小,接受一个数字,表示该模式下的效果程度,默认为0
我们将这个滤镜简单的应用到文字上看看效果:
& lt; div 类=癵-text"比;
,,,& lt; p> Normal Text
,,,& lt; p 类=癲ilate"祝辞Normal Text
,,,& lt; p 类=癳rode"祝辞Normal Text
& lt;/div>
& lt; svg 宽度=?”,身高=?”;在
,,,& lt; filter id=癲ilate"比;
,,,,,,,& lt; feMorphology 在=癝ourceAlpha",结果=癉ILATED",操作符=癲ilate",半径=?“祝辞& lt;/feMorphology>
,,,& lt;/filter>
,,,& lt; filter id=癳rode"比;
,,,,,,,& lt; feMorphology 在=癝ourceAlpha",结果=癊RODE",操作符=癊RODE",半径=?“祝辞& lt;/feMorphology>
,,,& lt;/filter>
& lt;/svg>
