如何模糊按钮的轮廓？

Question

我试图在不模糊内部图像的情况下模糊按钮的轮廓。 模糊滤镜仅适用于整个图像，但我只希望蓝色轮廓模糊。 基本上应用 filter: blur(4px) 但只在轮廓上

 button:focus {
  outline-color: #054EBA;
  outline-width: 2px;
  outline-offset: 5px;
}

我有什么我想要什么

Answer 1

您需要将模糊效果发送到另一个容器，它可以是伪容器。

例子

 button { position: relative; margin: 3em; padding: 0em 0.35em; color: white; background: #000; border-radius: 50%; border: none; font-size:2em; } button:focus:after { content: ''; position: absolute; top: -10px; bottom: -10px; left: -10px; right: -10px; pointer-events: none; border: solid #054eba 2px; filter: blur(2px); }

 <button>?</button>

Answer 2

Select 只有按钮而不是里面的图像