如何模糊按鈕的輪廓？

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 只有按鈕而不是里面的圖像