在Chrome中，下面的按钮在被点击后将保留它的轮廓线。如果我在Chrome的开发者工具中选择了 :active 复选框，查看按钮的CSS设置，仍然无法看到轮廓线的CSS值。它在视觉上似乎大约为1像素宽且灰色，但我没有看到这些值。有办法可以看到吗？
<body>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body> :focus {
outline: -webkit-focus-ring-color auto 5px;
}
然而，当我勾选focus复选框以便能够查看所有由焦点触发的CSS样式时，我在开发者工具面板中并没有看到该样式 ... 这是谷歌开发者工具的错误还是其他人也有这个问题？
实际上，有两种不同的样式会自动应用到按钮上，分别是通过用户代理样式表应用的伪类 :focus 和 :active：
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
button:active {
border-style: inset;
}
:focus 只适用于 Chrome，并且负责显示蓝色边框。覆盖此样式可以解决问题：
button:focus {
outline: none; /* Remove the outline */
}
button.active: {
border-style: none; /* Remove the border */
}<body>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>:focus被添加，通过用户代理样式表（在此截图中内联元素的下方）：
希望这有所帮助！ :)
你能发一个网站链接吗？
同时，建议查看“计算”样式选项卡。
关于为什么会发生这种情况的附注 - 我注意到有时候当JavaScript控制按钮状态时，我无法看到:active样式。
编辑：嗨Ole，我可以看到你的演示，谢谢。
根据Obsidian Age的有用回复，我运行了这段代码片段，并在单击时去掉了边框。这是你想要的行为，对吗？
<body>
<style>
button:focus {
outline: none; // Remove the outline
border-top: none;
border-width: 0;
}
button.active: {
border-style: none; //Remove the border
}
</style>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>在Chrome浏览器检查元素时，通过查看“计算”选项卡（位于“样式”旁边），我发现该按钮具有灰色的2像素宽的border-top、-right、-bottom和-left。由于某种原因，仅将border-top属性设置为none并将border-width设置为0就足够了。我不知道为什么，但我尝试了许多其他组合都不起作用 - 这是使用最少量的CSS实现的。
:focus来看到伪类。它应该出现在右侧的内联样式下方。我已经在两台不同的计算机上进行了测试，并刚刚更新了我的答案，提供了一个展示这一点的截图。如果您无法复制此操作，则可能是插件与您的样式表冲突或存在错误。希望这有助于澄清 :) - Obsidian Age