浏览器默认为button:focus添加虚线或蓝框是可访问性设计，用于键盘用户tab导航时识别焦点；需用button:focus{outline:none}配合button::-moz-focus-inner{border:0}处理firefox，并以box-shadow等提供替代视觉反馈。
button:focus 为什么默认有虚线或蓝框
浏览器给 button 加上的焦点轮廓（outline），本质是可访问性保障：键盘用户按 Tab 键导航时，必须能清晰看到当前聚焦在哪。这个 outline 默认由 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 要求所有可聚焦元素必须有清晰、足够对比度的视觉反馈。否则键盘用户将失去操作目标。
- 推荐用
box-shadow模拟焦点环：button:focus { box-shadow: 0 0 0 2px #007BFF; } - 避免仅靠颜色变化（如只改背景色），色觉障碍用户可能无法识别
- 确保焦点样式在深色/浅色模式下都可见，必要时用
@media (prefers-color-scheme: dark)调整
移动端点击时的高亮与 focus 冲突怎么解
在 iOS 和部分安卓浏览器中，点击 button 会先触发 :active，再短暂触发 :focus，同时叠加系统级点击高亮（灰色半透明 overlay），导致样式混乱。
- 用
* { -webkit-tap-highlight-color: transparent; }去掉点击高亮 - 慎用
touchstartJS 手动 blur，容易破坏键盘导航流 - 测试真机：模拟器常不触发真实 focus 流程，务必在 iPhone / Pixel 上验证 Tab 导航是否正常
实际项目里最容易被忽略的，不是怎么“去掉蓝框”，而是去掉之后没补上合规、可用的焦点指示——这会让整个表单对屏幕阅读器或键盘用户不可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
