Bootstrap按钮点击后的虚线边框是浏览器默认:focus轮廓，用于键盘用户可访问性；应使用:focus:not(:focus-visible){outline:none}替换而非移除，并辅以box-shadow等视觉反馈确保无障碍合规。
Bootstrap 按钮点击后出现的虚线边框是什么
那是浏览器默认的 :focus 轮廓（outline），用于可访问性——键盘用户 Tab 到按钮时需要视觉反馈。Bootstrap 本身没加这虚线，是 Chrome、Firefox 等浏览器原生行为。它不是 Bootstrap 的 class，也不是 bug，而是 focus 可访问性的基础保障。
如何安全地去掉按钮的 focus 虚线
直接写 outline: none 会损害可访问性，正确做法是「替换」而非「移除」：保留 focus 样式，但换成更符合设计的视觉表现（比如背景色变化或边框颜色变化）。针对 Bootstrap 按钮，推荐以下方式：
- 只对鼠标点击后的临时 focus 去 outline：用
:focus:not(:focus-visible)+outline: none，让键盘用户的:focus-visible依然生效 - Bootstrap 5+ 默认已启用该策略，但需确保未被自定义 CSS 覆盖；若用了旧版或重置了 focus 样式，要手动补上
- 在全局样式中添加（优先级需高于 Bootstrap 的 focus 规则）：
:focus:not(:focus-visible) { outline: none; }
为什么不能简单写 button:focus { outline: none }
这样会无差别禁用所有 focus 状态，导致键盘用户无法感知当前焦点位置，违反 WCAG 2.1 AA 标准。尤其当页面大量使用 Tab 导航时，用户会完全迷失操作目标。部分屏幕阅读器也会依赖 outline 的存在来同步焦点状态。
另外，某些 Bootstrap 版本（如 4.x）的 .btn:focus 已自带 outline: 0 或 outline: none，但仅限于 outline 属性——而现代浏览器（如 Chrome 89+）改用 outline-style: auto 渲染，它不受 outline: none 影响，必须靠 :focus-visible 逻辑拦截。
移动端和 Safari 的特别注意点
iOS Safari 和部分安卓 WebView 对 :focus-visible 支持滞后（iOS 15.4+ 才完整支持），所以纯靠 :focus:not(:focus-visible) 在老设备上可能失效。稳妥方案是双保险：
- 保留
:focus:not(:focus-visible)逻辑 - 额外为
button:focus设置一个非 outline 的视觉反馈，例如：button:focus { box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); } - 避免使用
outline: 0——它在 Safari 中可能触发奇怪的渲染残留
真正难处理的不是「怎么去掉」，而是「去掉之后用户还能不能顺利用键盘操作」。这点容易被忽略，但一旦上线，就可能收到无障碍审计报告里的高危项。
