必须保留或替换:focus视觉反馈，因outline被清空且无替代样式会导致键盘用户“失明”；:focus提供基础焦点支持，:focus-visible仅作键盘导航增强；应使用高对比outline+outline-offset，避免border干扰布局，兼顾wcag与多端兼容。
直接删掉 outline 还不补样式，等于关掉键盘用户的导航灯——必须保留或替换为高对比、不依赖颜色的视觉反馈。
为什么:focus样式经常“看不见”
不是 :focus 失效，而是视觉反馈被覆盖或隐藏了：
-
* { outline: none; }或 reset.css 里默认清掉了所有outline，你写的a:focus { outline: 2px solid blue; }被后声明的规则覆盖 - 写了
*:focus { outline: none; }却没加任何替代样式——键盘用户立刻“失明” - 用
border替代outline，但没设outline-offset，导致焦点框被内容遮挡或挤出布局 - iOS Safari 默认给聚焦元素加蓝光，一旦你设了
outline，它就消失；而你新设的样式对比度又不足（WCAG 要求 ≥ 3:1）
:focus 和 :focus-visible 到底怎么配着用
别用 :focus-visible 替代 :focus，它们解决不同问题：
- 所有浏览器都需支持的基础焦点样式，必须靠
:focus提供（哪怕只是outline） -
:focus-visible是浏览器判断“用户像在键盘导航”时才触发 → 适合做“仅键盘可见”的美化，比如虚线框 + 动画 - 兼容性要兜底：
@supports selector(:focus-visible)包裹美化规则，否则旧版 Safari/IE 直接忽略 - 优先级注意：
button:focus-visible会覆盖button:focus（同权重下后声明者胜），所以基础样式必须写在前面
安全又有效的 focus 样式写法
绕过常见陷阱的最小可行方案：
- 用
outline，不用border：它不占布局空间，不会引发重排，且符合 WCAG 对“非侵入式聚焦指示”的要求 - 显式设置
outline-offset（如2px），避免被父容器overflow: hidden剪掉 - 颜色选高对比度值，比如
#0066cc或#2d5d9f，别只靠色相区分（红绿色盲用户看不到） - 移动端需额外处理：iOS Safari 默认蓝光一设
outline就消失，必须手动补足尺寸和对比度 - 禁用
outline会让屏幕阅读器用户的自定义样式或浏览器强制高对比模式失效
真正难的不是写对一行 input:focus，而是确保它在整个组件库、所有第三方 UI 框架、每种设备和辅助技术环境下都稳定可见。样式可能被覆盖十次，但只要有一次没 fallback，键盘用户就卡在页面中间找不到路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
