结合盒子阴影和轮廓。

李·海耶斯的回答有点小变化 我发现

input[type=text]:focus {
    box-shadow: 0 0 0 1pt red;
    outline-width: 1px;
    outline-color: red;
}

最后的效果非常干净。没有使用边界半径时的大小跳跃

我在制作自定义单选按钮，我发现最好的自定义方法是使用伪元素，比如:Codepen

/*CSS is compiled from SCSS*/ .product-colors { margin-bottom: 1em; display: flex; align-items: center; } .product-colors label { position: relative; width: 2.1em; height: 2.1em; margin-right: 0.8em; cursor: pointer; } .product-colors label:before { opacity: 0; width: inherit; height: inherit; padding: 2px; border: 2px solid red; border-radius: 0.2em; content: ""; position: absolute; z-index: 1; background: transparent; top: -4px; left: -4px; } .product-colors input { position: absolute; opacity: 0; width: 0; height: 0; } .product-colors input:checked + label:before, .product-colors input:focus + label:before { opacity: 1; } <div class="product-colors"> <input type="radio" name="cs" id="cs1" value="black"> <label for="cs1" style="background:black"></label> <input type="radio" name="cs" id="cs2" value="green"> <label for="cs2" style="background:green"></label> <input type="radio" name="cs" id="cs3" value="blue"> <label for="cs3" style="background:blue"></label> <input type="radio" name="cs" id="cs4" value="yellow"> <label for="cs4" style="background:yellow"></label> </div>

No. Borders sit on the outside of the element and on the inside of the box-model margin area. Outlines sit on the inside of the element and the box-model padding area ignores it. It isn't intended for aesthetics. It's just to show the designer the outlines of the elements. In the early stages of developing an html document for example, a developer might need to quickly discern if they have put all of the skeletal divs in the correct place. Later on they may need to check if various buttons and forms are the correct number of pixels apart from each other.

边界本质上是审美的。与大纲不同，它们实际上是盒子模型的一部分，这意味着它们不会重叠设置为margin: 0的文本;边界的每一边都可以单独设置样式。

如果你试图应用一个角半径轮廓，我假设你使用它的方式大多数人使用边界。如果你不介意我问，outline的什么属性使它在边界上是可取的?

你可以用盒子阴影代替这样的轮廓

    box-shadow: 0 0 1px #000000;
    border-radius: 50px;
    outline: none;

Chrome 94.0 +。

I tested it in chrome 94.0 and it seems that the outline property honors the border-radius now.

.outline { outline: 2px solid red; } .border { border: 2px solid red; } .outline-10 { border-radius: 10px; } .border-2 { border-radius: 2px; } .outline-2 { border-radius: 2px; } .border-10 { border-radius: 10px; } .outline-50 { border-radius: 50%; } .border-50 { border-radius: 50%; } .circle { display: inline-block; width:50px; height: 50px; } <strong>Test this in chrome 94.0+</strong> <br/><br/> border-radius: 2px <span class="outline outline-2">outline</span> <span class="border border-2">border</span> <br/><br/> border-radius: 10px <span class="outline outline-10">outline</span> <span class="border border-10">border</span> <br/><br/> border-radius: 50% <span class="outline outline-50">outline</span> <span class="border border-50">border</span> <span class="outline circle outline-50">outline</span> <span class="border circle border-50">border</span>

尝试使用填充和背景色的边框，然后为轮廓边框:

.round_outline {
  padding: 8px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid black;
}

对我来说很管用。