直接用 outline: none 会破坏键盘可访问性，导致 Tab 导航时无法识别聚焦元素；正确做法是用 :focus-visible 精准控制，仅在键盘聚焦时显示高对比度自定义焦点样式。
直接用 outline: none 会出问题吗？
会。单纯在 button 上写 outline: none 虽能去掉聚焦边框，但会破坏键盘可访问性——用户按 Tab 键切换焦点时完全看不到当前聚焦的是哪个按钮，违反 WCAG 基本要求。
真正该做的是：只在非键盘触发的聚焦（比如鼠标点击后残留的 outline）上移除，而保留键盘导航时的 outline。
- 用
:focus-visible替代:focus，现代浏览器已广泛支持（Chrome 86+、Firefox 87+、Safari 15.4+） - 对老浏览器（如 IE 或旧版 Safari），可搭配
:focus:not(:focus-visible)回退方案 - 不要全局重置所有
button:focus的 outline
outline: none 和 outline: 0 有区别吗？
没有实际区别。两者都等效于移除 outline，但语义上 outline: 0 是旧式写法，outline: none 更准确（因为 outline 是“有/无”，不是“宽/窄”）。
不过要注意：outline: 0 在某些极老浏览器中可能被解析为 outline-width: 0，而 outline 样式和颜色仍存在，导致意外渲染；outline: none 则彻底禁用。
立即学习“前端免费学习笔记（深入）”；
- 始终优先用
outline: none - 别混用
outline: 0 solid #000这类写法——它其实等价于outline: 0，但冗余且易误解 - 如果同时要改 outline 颜色或样式，必须显式声明三值：如
outline: 2px dashed #007bff
怎么安全地自定义聚焦样式而不丢可访问性？
核心原则：不消灭 outline，而是用更清晰、更高对比度的视觉反馈替代默认 outline。
例如给按钮加一个带阴影的内发光或 border 变化，比粗暴删掉 outline 更友好。
- 用
:focus-visible+ 自定义样式，比如：button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); border-color: #007bff; } - 确保自定义样式满足最小对比度（文本与背景 ≥ 4.5:1，焦点环与相邻背景 ≥ 3:1）
- 避免仅用颜色区分状态（比如只变红/绿）——色觉障碍用户无法识别
为什么有时 :focus-visible 不生效？
常见原因不是语法错，而是触发条件未满足：该伪类只在「明确由键盘操作触发聚焦」时才匹配，比如 Tab、Shift+Tab、Ctrl+F6 等；鼠标点击、触摸、element.focus() 调用默认不会触发。
如果你手动调用 button.focus() 后想让它显示 :focus-visible 样式，需额外传参：button.focus({ preventScroll: true, focusVisible: true })（Chrome 115+、Firefox 123+ 支持）。
- 检查是否用了
preventDefault()干扰了原生聚焦行为 - 确认没在父元素上设置
outline: none并层叠覆盖了子元素 - 调试时可在 DevTools 中右键元素 → “Force state” → 勾选
:focus-visible快速验证样式
Tab 键走一遍流程——那套 :focus-visible 样式就永远不知道有没有真起作用。 
