我在制作自定义单选按钮，我发现最好的自定义方法是使用伪元素，比如: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的什么属性使它在边界上是可取的?

outline样式:auto已经拥有完全的浏览器支持很久了。

速记是:

outline: auto blue;

这让你设置自定义颜色，但不是自定义厚度，不幸的是(尽管我认为浏览器的默认厚度是一个很好的默认)。

您还可以在使用outline-style: auto时设置自定义outline-offset。

outline: auto blue;
outline-offset: 0px;

类似于上面的Lea Hayes，但我是这样做的:

div { 背景:# 999; 身高:100 px; 宽度:200 px; 边框:#999实心1px; border - radius: 10 px; 保证金:15 px; Box-shadow: 0px 0px 0px 1px #fff插入; ｝ < div > < / div >

没有必要嵌套DIVs或jQuery，尽管为了简洁起见，我省略了一些CSS的-moz和-webkit变体。你可以看到上面的结果

Firefox 88+: border-radius

从2021年4月起，你就可以在Firefox上使用简单的CSS了:

.actual { 轮廓:实红色; border - radius: 10 px; ｝ .expected { 边框:实红色; border - radius: 10 px; ｝ 在Firefox 88+中， <span class="actual">this outline</span> 应该是这样的 <span class="expected">this border</span>

Firefox 86.0的当前行为:

Webkit:没有解决方案

使用outline-style: auto将告诉«用户代理渲染自定义outline样式»:参见[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style(。

当您使用outline-style: auto时，基于webkit的浏览器将在边界上绘制轮廓。很难正确地设计它的风格。

.actual { 大纲:自动红色; border - radius: 10 px; ｝ .expected { 边框:实红色; border - radius: 10 px; ｝ 在WebKit浏览器(Chrome, Edge)中， <span class="actual">this outline</span> 应该看得很近 <span class="expected">this border</span>

Chrome 89.0的当前行为:

更多的信息

从Firefox 88(将于2021年4月20日发布)开始，outline将遵循边界半径的形状。 当前的-moz-outline-radius将变得多余并将被删除。

参见MDN关于-moz-outline-radius的条目:

从Firefox 88开始，标准的outline属性将遵循border-radius的形状，使-moz-outline-radius属性变得多余。因此，此属性将被删除。

通过设置outline-style: auto，我们可能很快就会看到我们的愿望

2030年见。