html - 如何在按钮周围放置实线边框以显示它具有焦点而无需封闭 <div>？

Question

我意识到我可以在按钮周围添加边框并将其设置为宽度，但是有没有一种方法可以在其周围添加实线边框以显示按钮具有焦点。

请注意，我希望有纯色(不褪色)边框。如果我连续有几个按钮，我也希望边框不要打乱间距吗？我知道一个解决方案是我把 <div>每个按钮周围都有边框并设置该 div 的边框，但我希望有一种方法可以做到这一点，而无需将每个按钮都包含在 div 中。

<button>a</button>
<button class="primary">b</button>
<button>c</button>

在这种情况下，我希望按钮 a、b 和 c 之间的空间相同，并且中间的按钮周围有一个实心区域。

Answer 1

使用 outline .示例:

button:focus {outline:3px solid red}

参见 JSFiddle