今天我偶然发现了这个问题。一个简单的解决方法是使用revert。对我来说在Chrome上也可以。

.outline-reset {
  outline: revert !important;
}

很有可能您的浏览器没有:focus伪类的默认值outline，在这种情况下，initial和unset没有帮助。
如果需要为某些选择器指定特定的轮廓，则必须定义它：
第一个
在我的家用电脑（Windows 10）上，我测试了Firefox、Chrome、Edge和IE11：默认情况下，none在:focus上显示轮廓。
这里有一个测试，你可以在不同的浏览器上运行。对我来说，它显示了大多数浏览器的默认设置是:focus状态上没有轮廓。IE11是个例外。
第一次

如果您定义了大纲样式，并希望在：focus上“还原”为默认的用户代理样式，这将很有帮助。您将发现使用初始属性的跨浏览器问题...我推荐使用此属性。

.myClass:focus {
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;
}

要获得接近浏览器默认值的轮廓，请使用auto关键字和适合您的浏览器的颜色。有关详细信息，请参阅this link。

a:focus {
    outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
}