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

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

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

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

如果你想要浮雕效果，你可以这样做:

.embossed { background: #e5e5e5; height: 100px; width: 200px; border: #FFFFFF solid 1px; outline: #d0d0d0 solid 1px; margin: 15px; } .border-radius { border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -khtml-border-radius: 20px; } .outline-radius { -moz-outline-radius: 21px; } <div class="embossed"></div> <div class="embossed border-radius"></div> <div class="embossed border-radius outline-radius">-MOZ ONLY</div>

我还没有找到一个工作周围有这个工作在其他浏览器。

编辑:你能做到这一点的唯一其他方法是使用盒子阴影，但如果你已经在该元素上有一个盒子阴影，这将不起作用。

结合盒子阴影和轮廓。

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

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

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

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

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

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

我喜欢这样。

.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 !