html - 在没有模糊效果的情况下在元素周围均匀地生成阴影/轮廓

Question

我有一个不规则形状的元素(比方说图标)。

我想要围绕它的某种轮廓，以符合特定颜色的形状。此轮廓的颜色必须均匀地围绕形状，即与形状各处的距离相同，并且没有颜色渐变。

我发现使用的是 css 选项 filter: drop-shadow()

参见:https://jsfiddle.net/m8w94qsz/3/

但是，生成的阴影要么具有模糊效果(第一个示例)，要么没有均匀地放置在元素周围(第二个示例)。

有什么方法可以用 CSS 达到预期的效果吗？

Answer 1

您可以像这样使用 filter: url() 和 svg 过滤器:

svg{position:absolute; left:-10em;}
.my-icon {
  content: url('https://img.icons8.com/officel/344/arrow.png');
  filter: url('#outline');
}

<svg width="0" height="0">
<filter id="outline">
<feMorphology in="SourceAlpha" result="expanded"
operator="dilate" radius="3"/>
<feFlood flood-color="red" result="red" />
<feComposite in ="red" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</svg>
<div>
  <i class="my-icon"></i>
</div>