:focus-visible是解决鼠标点击突兀黑框最干净的方式，但需配合显式outline设置、正确书写顺序（:focus在前重置，:focus-visible在后覆盖）及JS降级方案，否则Safari等旧浏览器将无焦点提示。
直接结论：用 :focus-visible 替代 :focus 是解决鼠标点击后突兀黑框最干净的方式，但必须配合显式 outline 设置和降级逻辑，否则在 Safari 或旧浏览器里会彻底消失焦点提示。
为什么鼠标点按钮/输入框会出黑框？
因为浏览器默认给可聚焦元素（如 button、input）加了 outline，而 :focus 一触发就画——不管你是 Tab 进来的，还是鼠标点进去的。这个黑框不是 bug，是可访问性基础；但对视觉设计来说，它常和 UI 风格冲突，尤其在圆角按钮或卡片式表单里。
怎么写才能让:focus-visible真正生效？
光写 button:focus-visible { outline: 2px solid #007bff; } 不够。常见失效原因有三个：
- 全局写了
* { outline: none; }或框架自带的button:focus { outline: none; }，直接把:focus-visible的底层能力干掉了 - 没显式设置
outline，只改了border或box-shadow——:focus-visible不会自动继承这些样式 - 规则顺序错：如果
button:focus { outline: none; }在:focus-visible规则之后，它会覆盖掉后者
推荐写法（安全、可降级）：
立即学习“前端免费学习笔记（深入）”；
button:focus {
outline: none;
}
button:focus:not(:focus-visible) {
outline: none;
}
button:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
}移动端和 Safari 上为什么:focus-visible不亮？
这不是你代码的问题，是现实限制：
- iOS Safari 全系（截至 16.6）仍不支持
:focus-visible，触屏点击不会触发它 - Android Chrome 84+ 才开始支持，但部分低端机型或 WebView 仍 fallback 到
:focus - Safari 15.4+ 支持，但对自定义组件（比如用
div+tabindex实现的开关）识别不准，容易漏触发
所以别指望它在所有设备上“智能切换”。真要兼顾，得用 @supports (selector(:focus-visible)) 包一层，或者老老实实用 JS 监听 keydown 做手动标记。
容易被忽略的关键细节
很多人调通了 :focus-visible 就以为万事大吉，但下面三点实际项目中高频翻车：
- 带
autofocus的输入框，页面加载时不会触发:focus-visible——哪怕用户紧接着按 Tab，浏览器也可能“记住”首次是鼠标驱动，后续几秒内都降级为:focus - React/Vue 组件里调用
element.focus()，默认不激活:focus-visible；Chrome 111+ 起可传{ focusVisible: true }，但 Firefox 和 Safari 不认这个参数 - 某些 CSS-in-JS 库（如 Emotion）生成的 class 名特异性不够，
button:focus-visible可能被button:focus的更高权重规则压住，调试时得看 computed styles 里 outline 最终值是多少
真正稳定的方案，永远是先确保键盘用户能看清焦点在哪，再用 :focus-visible 把鼠标用户的干扰降到最低——而不是反过来。
