为什么onFocus触发时，anchor元素使用auto值的outline样式不显示？

问题原因 #

outline-style: auto 是WebKit内核的专属属性值，Chrome内置了规则：仅当元素的聚焦是由键盘导航（比如Tab键切换）触发时，才会渲染auto类型的焦点环；如果是鼠标点击触发的聚焦，Chrome会自动隐藏auto类型的焦点环，避免干扰用户操作。
该现象和代码中的三元运算符逻辑无关：

• 将auto替换为solid/dotted这类显式描边样式后，不受上述默认规则限制，无论哪种方式触发聚焦都会正常显示
• 未聚焦状态下不会触发Chrome的焦点环隐藏规则，所以把false分支设为auto时样式会正常生效
• 如果用Tab键将焦点切到目标链接上，auto样式也可以正常渲染

解决方案 #

方案1（推荐）：使用原生伪类实现

不用自行维护聚焦状态，Chrome原生按钮的焦点环就是通过:focus-visible伪类实现的，给a标签添加如下CSS即可：

a:focus-visible {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: 2px; /* 可根据设计需要调整偏移量 */
}

方案2：适配内联状态控制的场景

如果一定要通过内联样式、状态变量控制显隐，直接把auto替换为solid即可，-webkit-focus-ring-color颜色变量可以正常使用，视觉效果和auto几乎无差异：

style={{
  backgroundColor: '#f44336', 
  color: 'white', 
  padding: '14px 25px', 
  outline: outlined ? '5px solid -webkit-focus-ring-color' : 'none'
}}

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