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>

我刚刚找到了一个很好的解决方案，在看了所有的回复后，我还没有看到它发布。所以，这就是我所做的:

我为类创建了一个CSS规则，并为该规则使用了一个伪类:focus。我设置outline: none来去掉Chrome默认使用的浅蓝色无边框半径的“outline”。然后，在同样的:focus伪类中，轮廓不再存在，我添加了半径和边界属性。导致以下结果

outline: none;
border-radius: 5px;
border: 2px solid maroon;

当用户通过选项卡选择元素时，有一个带有边界半径的栗色轮廓。

There is the solution if you need only outline without border. It's not mine. I got if from Bootstrap css file. If you specify outline: 1px auto certain_color, you'll get thin outer line around div of certain color. In this case the specified width has no matter, even if you specify 10 px width, anyway it will be thin line. The key word in mentioned rule is "auto". If you need outline with rounded corners and certain width, you may add css rule on border with needed width and same color. It makes outline thicker.

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>

我喜欢这样。

.circle:before {
   content: "";
   width: 14px;
   height: 14px;
   border: 3px solid #fff;
   background-color: #ced4da;
   border-radius: 7px;
   display: inline-block;
   margin-bottom: -2px;
   margin-right: 7px;
   box-shadow: 0px 0px 0px 1px #ced4da;
}

它会创建一个灰色的圆，周围有边框，边框也是1px !

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

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

对我来说很管用。