浅谈CSS不规则边框的天生方案

• 需求配景，给不规则图形添加边框
  
• 实验使用 drop-shadow 添加边框
  
• 使用 SVG feMorphology 滤镜添加边框
  
  
  
  • feMorphology 滤镜
    
  
  
• 总结
  

<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 {
...
filter: drop-shadow(0px 0px 2px #000);
...
}
复制代码

<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>
复制代码

p {
font-size: 64px;
}
.dilate {
filter: url(#dilate);
}
.erode {
filter: url(#erode);
}
复制代码

<svg width="0" height="0">
<filter id="outline">
<feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology>
<feMerge>
<feMergeNode in="DILATED" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</svg>
复制代码

.arrow-button {
...
filter: url(#outline);
...
}
复制代码

<svg width="0" height="0">
<filter id="outline">
<feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology>

<feFlood flood-color="green" flood-opacity="1" result="flood"></feFlood>
<feComposite in="flood" in2="DILATED" operator="in" result="OUTLINE"></feComposite>

<feMerge>
<feMergeNode in="OUTLINE" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</svg>
复制代码

   

• 使用 drop-shadow 可以实现给不规则图形添加阴影，但是无法实现给不规则图形添加实体不带含糊的边框   
  
• 使用 feMorphology SVG 滤镜可以实现给给不规则图形添加边框效果，通过控制  radius="1" 可以调治边框的大小   
  
• 使用 feMorphology 辅以 feFlood 和 feComposite 滤镜改变边框颜色   
  
• 通过 CSS Filter 的 url 模式，可以快速的将 SVG 滤镜引入 HTML 元素，比方 filter: url(#outline)