button:focus 默认有虚线或蓝框是为保障键盘用户tab导航时的可访问性，由outline控制而非border；需用button:focus{outline:none}配合button::-moz-focus-inner{border:0}处理firefox，并提供box-shadow等替代视觉反馈以满足wcag要求。
button:focus 为什么默认有虚线或蓝框
浏览器给 button 加上的焦点轮廓，本质是可访问性保障：键盘用户按 Tab 导航时，必须能清晰看到当前聚焦在哪。这个轮廓由 outline 控制，不是 border，也不影响布局，但样式因浏览器而异——Chrome/Safari 显示蓝色实线，Firefox 显示虚线，且无法用普通 outline: none 完全抹除。
如何真正移除 button:focus 的默认轮廓
只写 button:focus { outline: none; } 在 Firefox 下无效，它会保留 :-moz-focus-inner 伪元素生成的内边框。必须组合处理：
-
button:focus { outline: none; }—— 清除主流浏览器的 outline -
button:-moz-focus-inner { border: 0; padding: 0; }—— 针对 Firefox 移除其私有内边框 - 若用了
appearance: none，记得加-webkit-appearance: none和appearance: none，否则 Safari 可能仍保留原生样式
移除 outline 后必须提供替代焦点样式
去掉默认轮廓不等于可以忽略焦点状态。WCAG 要求所有可聚焦元素必须有清晰、足够对比度的视觉反馈。否则键盘用户将失去操作目标。
- 推荐用
:focus-visible替代无条件:focus，只在键盘触发时显示轮廓，避免鼠标用户干扰 - 轮廓宽度 ≥ 2px、对比度 ≥ 3:1（相对于背景），禁用纯色红/绿等仅靠颜色区分的方式
- 搭配
outline-offset: 2px避免与边框或圆角粘连；高对比度模式下用@media (forced-colors: active)回退到Highlight - 自定义控件（如
div[role="button"]）需显式加tabindex="0"，否则:focus-visible不生效
纯键盘测试时焦点“消失”的真实原因
Tab 到某个区域后焦点看似“不见了”，大概率不是 bug，而是结构或配置问题：
- 滚动容器（如卡片列表
div.card-list）本身没设tabindex="0"，无法被 Tab 进入，更不会自动滚动 - 模态框打开后焦点未由 JS 主动接管（
element.focus()），或关闭后未回退到触发按钮 - 元素被
opacity: 0或position: absolute; left: -9999px隐藏，仍可被 Tab 到 - DevTools 中看
Focusable: true和focused: true才是真实依据，光看视觉 outline 不可靠
tabindex 控制和 JS 焦点接管三者协同，缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
