:focus-visible比:focus更合适，因为它仅在真实键盘导航时激活蓝框，避免鼠标点击等场景的干扰，保障键盘用户定位当前焦点。生效需两个前提：禁用全局outline重置且显式声明outline样式；还需兼顾Safari兼容性、暗色模式及高对比度适配。
为什么:focus-visible比:focus更合适
因为:focus会在鼠标点击、触摸、JS调用element.focus()时都触发蓝框，而:focus-visible只在真实键盘导航（Tab/Shift+Tab/Enter/Space）时激活。用户点一下按钮就弹出蓝框，纯属干扰；但键盘用户靠它定位当前操作位置——这个区分不是可选功能，是可访问性底线。
怎么写:focus-visible才真正生效
两个前提缺一不可：
- 页面不能有全局
*:focus { outline: none; }或框架自带的粗暴重置（比如旧版Bootstrap 4的reset.css） - 必须显式声明
outline样式，只写:focus-visible { }空规则等于没写
推荐写法：
button:focus {
outline: none;
}
button:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
注意outline-offset值要大于0，否则可能和边框重叠导致视觉错乱；outline-width建议≥2px，满足WCAG 2.1对比度要求。
移动端和Safari的兼容性坑
Safari从15.4开始支持:focus-visible，但早期版本行为不稳定；iOS WebView和部分安卓WebView仍可能完全忽略它。这时候得补JavaScript降级方案：
- 监听
keydown事件，检测是否按了Tab/Arrow/Enter等键，动态加focus-visible类 - 对
click事件加setTimeout(() => el.blur(), 0)，避免鼠标点击后残留焦点（慎用，会破坏键盘用户的连续Tab流） - 更稳妥的是加
-webkit-tap-highlight-color: transparent，专治H5端点击闪蓝框
uni-app项目里，view或button组件需同时写outline: none和-webkit-tap-highlight-color: transparent，否则H5和小程序双端都可能失效。
别忽略暗色模式和高对比度场景
你设的#3b82f6在深色背景上可能看不见，系统开启“高对比度模式”时浏览器会强制覆盖outline颜色。必须补：
@media (prefers-color-scheme: dark) {
button:focus-visible {
outline-color: #60a5fa;
}
}
@media (forced-colors: active) {
button:focus-visible {
outline: 2px solid ButtonText;
}
}
真正难的不是写对代码，而是每次改完都要切到键盘模式试一遍Tab流，再开屏幕阅读器听一次焦点播报——这些步骤没人替你做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
