使用all: unset后，如何恢复按钮聚焦时的浏览器默认outline样式

直接把代码里的 outline: initial; 换成 outline: revert; 就能解决问题，核心原因是：

• initial 是把属性重置为CSS规范定义的初始值（outline的初始值是none），并不是浏览器给按钮设置的原生聚焦样式
• revert 会让属性恢复成浏览器默认的用户代理样式，也就是原生按钮原本的聚焦outline效果

完整代码如下：

button {
    all: unset;
    cursor: pointer;
}
button:focus {
    outline: revert;
}

<div><a href="#">MY LINK</a></div>
<br>
<div><button>MY BUTTON</button></div>
<br>
<div><a href="#">MY LINK</a></div>

如果不想用all: unset一次性清除所有样式，也可以针对性重置按钮的border、background、padding、font等属性，这样能更精准地控制保留的原生行为，但all: unset配合outline: revert是最简洁的方案，既能彻底清除默认视觉样式，又能保留无障碍访问必需的原生聚焦反馈。

内容的提问来源于stack exchange，提问作者Oscar