我通常使用:after伪元素来完成这个任务:

当然，这取决于使用情况，这种方法允许控制单个边界，而不是使用硬阴影方法。

你也可以设置-1px偏移量，并使用背景线性渐变(无边框)再次获得不同的效果。

身体{ 保证金:20 px; ｝ 一个{ 背景:# 999; 填充:10px 20px; border - radius: 5 px; 文字修饰:没有; 颜色:# fff; 位置:相对; 边框:2px实心#000; ｝ {后 内容:”; 显示:块; 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; border - radius: 5 px; 边框:2px实体#ccc; ｝ < a href = " # " > < / >按钮

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

2030年见。

我有一个圆形边框的输入字段，想要改变焦点轮廓的颜色。我无法控制输入控件中可怕的方形轮廓。

所以我用了盒影。实际上我更喜欢阴影的平滑外观，但阴影可以被硬化以模拟圆形轮廓:

输入，输入:焦点{ 边界:没有; border - radius: 2分; Box-shadow: 0 0 0 1pt灰色; 大纲:没有; 过渡:1。; ｝ /*平滑的轮廓与盒子阴影:*/ .text1:专注{ 箱影:0 0 3pt 2pt矢车菊蓝; ｝ /*硬“轮廓”与盒子阴影:*/ .text2:专注{ 箱影:0 0 0 2pt红色; ｝ <输入class = " text1 " > < br > < br > <input type=text class="text2">

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

    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>

我想在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