应优先用:focus保底确保兼容性，再用:focus-visible精准控制键盘焦点样式；可通过@supports检测实现新老浏览器的优雅降级，兼顾可访问性与用户体验。
当 :focus-visible 在旧版浏览器（如 Safari 15.6 之前、IE、部分安卓 WebView）不被支持时，直接使用它会导致焦点样式完全失效。稳妥的做法是：**用 :focus 作为兜底，再用 :focus-visible 覆盖并精细化控制——只在用户明确通过键盘操作获得焦点时才显示可见轮廓，避免鼠标点击时的干扰**。
用 :focus 保底，确保所有场景都有基础焦点反馈
所有现代浏览器都支持 :focus，它是兼容性最稳的选择。可以先定义一个清晰但不过于突兀的基础焦点样式，比如：
button:focus {
outline: 2px solid #007aff;
outline-offset: 2px;
}这样即使浏览器不识别 :focus-visible，用户仍能感知焦点位置，满足基本可访问性要求。
用 :focus-visible 覆盖键盘用户的焦点体验
在支持 :focus-visible 的浏览器中，它会自动判断焦点是否由键盘触发（如 Tab、Shift+Tab）。你可以在 :focus 基础上叠加更精细的样式，例如：
立即学习“前端免费学习笔记（深入）”；
button:focus-visible {
outline: 3px solid #007aff;
outline-offset: 3px;
/* 可额外加阴影或背景微调，强调键盘导航状态 */
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
}注意：不需要写 button:focus:not(:focus-visible) 去“隐藏”鼠标点击的轮廓——:focus-visible 本身就不会在鼠标点击时匹配，:focus 的样式依然保留，只是被更优的 :focus-visible 样式覆盖（层叠优先级更高）。
用 @supports 检测，避免样式污染或冲突
如果你希望更严谨地隔离逻辑（比如想在不支持时完全禁用某套视觉规则），可用 CSS @supports：
button:focus {
outline: 2px solid #999; /* 默认灰阶，低调但可见 */
}
@supports (selector(:focus-visible)) {
button:focus {
outline: none; / 移除默认 focus，交给 focus-visible 管理 /
}
button:focus-visible {
outline: 3px solid #007aff;
outline-offset: 3px;
}
}
这样既保证老浏览器有 fallback，又让新浏览器实现「仅键盘显示强焦点」的理想行为。
