时间戳

首页 > 解决方案 > 如何模糊按钮的轮廓？

css - 如何模糊按钮的轮廓？

问题描述

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

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

我有 什么我想要什么

标签： css

解决方案

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

例子

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>

推荐阅读