bootstrap按钮点击后蓝色边框是可访问性焦点样式，并非bug；它由box-shadow实现而非outline，应优先用.btn:focus-visible{box-shadow:none}精准控制，仅在键盘导航时保留焦点指示以兼顾无障碍要求。
Bootstrap 按钮点击后出现的蓝色边框（即 :focus 或 :focus-visible 轮廓）不是 bug，而是可访问性设计的一部分——它帮助键盘用户识别当前焦点元素。但如果你确认该样式干扰了 UI 且不破坏可访问性流程（比如已提供其他焦点指示），可以安全移除。
为什么默认有蓝色边框？
Bootstrap 5+ 默认使用 box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) 实现焦点环，而非传统 outline。它由 .btn:focus 和 .btn:focus-visible 触发，且依赖 prefers-reduced-motion 和 focus-visible polyfill 行为。
- 仅用
outline: none无法生效 —— 因为它不是 outline，是 box-shadow - 直接覆盖整个
.btn:focus可能影响键盘导航体验 - 部分浏览器（如 Safari）对
:focus-visible支持有限，会退回到:focus
推荐：用 :focus-visible 精准移除（现代方案）
只在用户通过鼠标/触控点击时隐藏焦点环，保留键盘 tab 导航时的可见轮廓，兼顾 UX 与可访问性。
.btn:focus-visible {
box-shadow: none;
}
- 适用于 Chrome 86+、Firefox 78+、Edge 88+、Safari 15.4+
- 若项目需支持旧版 Safari（:focus:not(:focus-visible) 回退
- 不要写成
.btn:focus—— 这会让键盘用户完全失去焦点提示
兼容旧版浏览器：全局禁用 + 手动恢复键盘焦点
如果必须彻底移除（例如嵌入式设备、kiosk 场景），且确认无键盘操作需求，可：
.btn:focus {
box-shadow: none !important;
}
/* 可选：为键盘用户加一个更低调的替代焦点样式 */
.btn:focus:not(:hover) {
background-color: #0d6efd;
opacity: 0.9;
}
-
!important是必要的，因为 Bootstrap 的box-shadow带有!important - 避免全站写
*:focus { box-shadow: none }—— 会破坏所有组件的可访问性 - 移除后务必测试 tab 键导航是否仍可感知（例如用屏幕阅读器或纯键盘操作）
Vue / React 组件中动态控制（避免全局污染）
在单文件组件或 JSX 中，更推荐局部覆盖，防止影响其他按钮：
<button class="btn btn-primary" :class="{ 'no-focus-ring': noFocus }">提交</button>
.no-focus-ring:focus-visible {
box-shadow: none;
}
- 用布尔 prop 控制是否启用焦点环，比全局 CSS 更可控
- 结合
autofocus或ref.focus()时，注意逻辑一致性 —— 若禁用了 focus ring，最好同步提供视觉反馈（如背景色微调） - 不要在
mounted或useEffect里用 JS 移除outline—— 这类操作不可靠且绕过标准焦点机制
真正要注意的不是“怎么去掉”，而是“去掉之后谁还能看清当前焦点”。很多团队删掉蓝色边框后才发现盲人用户或键盘党完全迷失了操作位置 —— 如果没准备替代方案，就别删。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
