应使用:focus-visible配合:focus:not(:focus-visible)清除鼠标焦点轮廓，因:focus-visible仅在键盘导航时触发；需确保元素有语义角色且无全局outline重置，并注意Safari 15.4+才原生支持。
直接结论：用 :focus-visible 替代 :focus 控制轮廓，但必须配合 :focus:not(:focus-visible) 降级清除鼠标点击的 outline，否则无效。
为什么只写 button:focus-visible { outline: none; } 没用
浏览器不会在鼠标点击时触发 :focus-visible，所以这条规则根本不会生效——它只在键盘导航（Tab/Shift+Tab/Enter/Space）时匹配。单独写它，等于什么都没做。更常见的情况是：你写了这条，但蓝框还在，于是误以为兼容性有问题，其实是逻辑没搭对。
真正起作用的是组合写法，且顺序不能错：
-
button:focus先声明基础焦点行为（比如保留 outline 或设为默认） -
button:focus:not(:focus-visible)紧接着清除“非键盘触发”的 outline -
button:focus-visible最后定义键盘用户的可见轮廓（必须显式声明outline，空规则或outline: 0不算）
:focus-visible 在哪些元素上根本不会触发
不是所有能获得焦点的元素都支持 :focus-visible 的智能判断。浏览器只对“明确需要焦点提示”的控件启用该伪类：
立即学习“前端免费学习笔记（深入）”；
- ✅ 默认支持：
input、textarea、button、select、带tabindex的div（且有role="button"等语义） - ❌ 基本不触发：
a（无href）、span（哪怕写了tabindex="0"）、img（本身不可聚焦，蓝框来自父容器） - ⚠️ 自定义组件要小心：用
div + tabindex模拟按钮，但没加role="button"或监听Enter/Space，部分浏览器（尤其旧 Safari）会跳过:focus-visible
移动端 iOS 上的“蓝框”不是 :focus 问题
如果你在 iPhone 上点按钮看到半透明蓝色 overlay，那不是 :focus 或 :focus-visible 能管的——这是 WebKit 的 tap highlight，和焦点完全无关。解决它得用：
-webkit-tap-highlight-color: transparent;
注意：这个样式只对可点击区域生效（如 a、button、带 onclick 的元素），且不影响任何焦点逻辑。别把它和 outline 混为一谈，也别试图用 :focus-visible 去覆盖它。
容易被忽略的两个硬性前提
:focus-visible 不是开箱即用的开关，它依赖两个底层条件：
- 页面不能存在全局
*:focus { outline: none; }—— 这会提前把 outline 干掉，:focus-visible后续再怎么声明都无效 -
:focus-visible规则里必须显式写outline（比如outline: 2px solid #007aff），写成outline: 0或留空，等于没写
Safari 15.4+ 才原生支持，老版本会直接忽略整条 :focus-visible 规则；如果项目需兼容更低版本，得用 polyfill 或退回到 :focus + 更柔和的视觉反馈（比如 box-shadow）。
