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>