Question

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

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

What I have What I want

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

只选择按钮，不要选择里面的图片

如何模糊按钮的轮廓？

2 个答案: