Css 如何隐藏按钮轮廓

我在这个页面上有很多按钮：

我已经尝试了下面代码的每一种组合，但没有任何东西能摆脱大纲

*:focus,
button,
button:focus,
button:active {
  outline: 0;
  outline-width: 0;
  outline: none;
  outline-style: none;
}

---

您的HTML正在使用twitter引导程序的

btn

和

btn主分类

<button type="button" class="btn btn-primary circle"...></button>

所以使用
border:none和恼人的蓝色边框将消失

在此处更新了您的小提琴：

就这一行：
按钮{
大纲：无！重要；
}
理论上，可以这样写：

button {
    outline: none; 
}

这将从按钮中删除“选择边框”。但是，在这种情况下，我们需要
！重要信息
，以防止引导覆盖它（如下所示）。我还建议为带有Chrome和Firefox的浏览器添加跨浏览器支持

button {
    outline: none !important; 
}

input[type="button"]::-moz-focus-inner {
    border: 0;
}

或者，引导程序将这些样式与焦点上的按钮关联，您需要删除或覆盖这些按钮

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

使用此选项覆盖它：

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: none;
}    

您是否打算使用
border:none
？请参阅下面的答案。有些人说大纲是问题所在，但显然不是因为您过度编写了大纲属性。这绝对是twitter引导应用的1px边界。
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: none;
}