我想在Bootstrap导航栏中为下拉菜单提供一些不错的焦点可访问性，并且对此非常满意:

a.dropdown-toggle:专注{ 显示:inline-block; Box-shadow: 0 0 0 2px #88b8ff; border - radius: 2 px; ｝ <a href="https://stackoverflow.com" class="dropdown-toggle">访问Stackoverflow

我把轮廓设置为透明。

input[type=text] {
  outline: rgba(0, 0, 0, 0);
  border-radius: 10px;
}

input[type=text]:focus {    
  border-color: #0079ff;
}

(2023年2月)

据我所知，只有Firefox和Firefox for android支持Outline半径。

-moz-outline-radius: 1 em;

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的什么属性使它在边界上是可取的?

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

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

对我来说很管用。

类似于上面的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变体。你可以看到上面的结果