Html 为什么手动焦点样式显示在鼠标单击时而默认焦点样式不显示？

所以我注意到，如果我为一个按钮创建自己的焦点样式（例如），在我用鼠标单击按钮后，样式会显示出来。但是，当我单击带有默认焦点样式的按钮时，没有轮廓

但是，您可以完全通过按钮进行制表，两个按钮在对焦时都会显示一个轮廓

我很好奇为什么默认焦点样式和我自己的焦点样式的功能不一样为什么这两个选项都出现在键盘导航上，但只有一个出现在鼠标单击上？

请在以下按钮上尝试单击和使用键盘导航：

按钮{
填充：.5rem；
保证金：2rem；
}
.我的按钮：聚焦{
外形：3倍纯红；
}

此按钮具有默认焦点样式
这个按钮有我自己的焦点样式

默认情况下，outline属性是键盘用户的辅助工具。使用鼠标，光标是您了解哪个元素具有焦点的视觉辅助工具。在一个充满元素的屏幕上进行Tab键切换，而不显示轮廓，会导致用户无法知道他将Tab键切换到了什么位置（这就是为什么您应该完全这样做的原因）。

Chrome使用

轮廓样式：auto

详情如下:

auto

值允许用户代理渲染自定义轮廓样式，通常是平台的用户界面默认样式，或者可能是比CSS中可以详细描述的样式更丰富的样式，例如，具有半透明外部像素的圆形边缘轮廓，看起来发光。因此，本规范不定义在渲染

auto

样式轮廓时如何合并或使用轮廓颜色（如果有）。用户代理可以将

auto

视为

solid

<>这意味着不是所有的浏览器都认为<代码>实录和<代码> Audio<代码>是相同的。p> 您可以使用

auto

值而不是

solid

来重现与Chrome相同的行为：

按钮{
填充：.5rem；
保证金：2rem；
}
.我的按钮：聚焦{
外形：3倍自动红色；
}

此按钮具有默认焦点样式
这个按钮有我自己的焦点样式

这只适用于某些浏览器。这不是我问题的答案。请仔细阅读。我无法让这个例子起作用。使用键盘导航时，轮廓不是红色。我还试着只改变“轮廓颜色：红色”，但没有成功。@m.trl我用谷歌Chrome 62.0.3202.94和63.0.3239.84测试了它。您有哪个浏览器？版本63.0.3239.84