应保留焦点指示而非直接移除蓝色外框，推荐用 outline: none 配合 :focus-visible 设置自定义轮廓，确保键盘用户可感知焦点且视觉一致。
为什么按钮点击后总有个蓝色外框？
这是浏览器默认的 :focus 样式，用于辅助访问（比如键盘 Tab 导航），不是 bug，但常被误认为“丑”或“多余”。直接删掉会损害可访问性，正确做法是用 outline 替换为更可控的视觉反馈。
如何安全地移除或替换 focus 轮廓？
不推荐无脑写 outline: none，尤其对 button、a、input 这类可聚焦元素。应保留焦点指示，只是换一种形式：
- 用
outline: 2px solid transparent占位，再配合outline-offset控制距离 - 改用
box-shadow模拟轮廓，例如：box-shadow: 0 0 0 2px #007bff - 只在鼠标点击后临时隐藏：用
:focus:not(:focus-visible)配合outline: none（现代浏览器支持） - 确保键盘用户仍能感知焦点：测试 Tab 切换时是否有明显样式变化
Chrome/Firefox/Safari 的 outline 行为差异
不同浏览器对 :focus-visible 的触发逻辑不同：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Chrome 和 Edge 默认只在键盘聚焦时才触发
:focus-visible，鼠标点击后不生效 - Firefox 需要启用
about:config → layout.css.focus-ring.visible才能一致行为 - Safari 目前不支持
:focus-visible，只能靠:focus+ JS 检测event.type === 'keydown'来模拟 -
outline-style: auto（浏览器默认值）无法用 CSS 覆盖颜色，必须显式设为solid或none
实际项目中建议的最小安全方案
兼顾可访问性与设计一致性，推荐这段代码作为基础重置：
button:focus {
outline: none;
}
button:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
}
注意：如果用了 outline: 0，某些旧版 IE 会失效，必须用 outline: none；outline-offset 在 Safari 中对 outline: auto 无效，所以先确保 outline-style 是明确值。
真正麻烦的不是去掉蓝框，而是让键盘用户和鼠标用户都获得恰当的反馈——这点容易被跳过，直到 QA 或无障碍审计时才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
