为何删除outline:none设置后CSS border过渡效果会失效？

CSS样式 #

input {
  border: 3px solid #FFEFD5;
  width: 300px;
  padding: 10px;
  outline: none;
  transition: 0.5s;
}

input:focus {
  border: 3px solid #CD853F;
}

HTML结构 #

<form>
  <input type="text" id="email" name="email" value="Click Here!">
</form>

上述代码为input元素配置了0.5s的border过渡效果，元素聚焦时边框颜色会变更为#CD853F。实际测试发现，若删除CSS样式中的outline: none配置，input聚焦时的边框过渡效果就会失效。

这个现象本质不是border过渡真的失效，是浏览器默认聚焦轮廓的视觉遮挡造成的错觉：

• 所有浏览器默认都会给聚焦的可交互表单元素（比如input）添加原生outline轮廓样式，这个轮廓默认绘制层级在元素border之上，位置紧贴border外侧，宽度足以完全覆盖border区域，而且原生轮廓的显示、隐藏都是瞬时完成的，没有过渡效果。
• 当你没有设置outline: none时，input聚焦的瞬间，浏览器会第一时间把瞬时出现的原生高亮轮廓绘制在border上层，直接盖住正在执行颜色渐变过渡的border，你肉眼只能看到瞬间跳出来的原生轮廓，看不到底下border的颜色渐变过程，就会误以为border过渡失效了。
• 可以通过简单操作验证这个逻辑：保留默认outline不删除，只额外添加outline-offset: 3px样式把原生轮廓往外偏移3像素，和border拉开距离，就能看到border的0.5s颜色过渡完全正常运行，从来没有失效过。

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