我正在用CSS做一些形狀，特別是一個有大邊框的環(huán)，我發(fā)現(xiàn)了一個令人討厭的問題:我做的圓有一個默認(rèn)的邊界線。我試過用& quot大綱:無& quot或者& quot邊框:無& quot，但我需要一個邊框。我不知道這是不是瀏覽器的問題。

這是我的React組件:

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

這是我的風(fēng)格:

.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;
  }
}

我怎樣才能去掉這個？

您看到的邊框是由瀏覽器通過輪廓樣式突出顯示的默認(rèn)焦點決定的。 可以添加一個outline的CSS規(guī)則:none要移除此焦點行為，您的邊框仍將保持不變，但您將沒有藍(lán)色輪廓，并且該元素將不再使用藍(lán)色邊框來捕捉焦點。