删除 div 的默认边框线

Question

我正在做一些与 CSS 反应的形状，特别是带有大边框的圆环，我在其中发现了一个烦人的问题：我制作的圆的默认边框。我尝试使用“大纲：无”或“边框：无”，但我需要一个边框。不知道是不是浏览器的问题。

这是我的 React 组件：

export default function Ring(props) {
 return <div className={`ring ${props.size} ${props.color}`}></div>;
}

这里是我的风格：

.ring {
  border-radius: 50%;
  z-index: -1;

  &.medium {
    height: 500px;
    width: 500px;
    border-width: 80px;
  }
  &.main {
    border-color: $main-color;
  }
  &.gray {
    border-color: $soft-gray;
  }
}

我怎样才能删除它？

Answer 1

您看到的边框由浏览器通过outline 样式突出显示的默认焦点驱动。 您可以添加 outline:none; 的 CSS 规则来移除此焦点行为，您的边框仍将保持，但您不会有蓝色轮廓，并且元素将不再使用蓝色边框捕获焦点。