应使用 :focus-visible 仅在键盘导航时显示蓝色边框，鼠标点击后自动隐藏；同时可配合 JS 在点击回调中 blur() 防止焦点滞留，兼顾可访问性与体验。
focus 状态残留导致蓝色边框持续显示
Bootstrap 按钮点击后留下的蓝色边框，本质是浏览器对 :focus 状态的默认 outline 样式（尤其在 Chrome/Firefox 中）。按钮被点击后获得焦点，但未主动 blur，outline 就不会自动消失。这不是 Bootstrap 的 bug，而是原生行为 —— 只是 Bootstrap 的 btn 类没覆盖掉这个 focus outline。
- 仅在鼠标点击后出现？大概率是键盘焦点未被清除，
tabindex或自动聚焦逻辑干扰了预期 - 触摸设备上也复现？说明是
:focus-visible未生效或被忽略，需检查是否禁用了outline: none而未提供替代焦点指示 - 使用
btn-link或自定义border-radius后更明显？因为圆角会裁剪 outline，视觉上显得“突兀”
用 CSS 移除 focus outline 但保留可访问性
直接写 outline: none 在 :focus 上会损害键盘用户导航体验。正确做法是只在非键盘操作触发 focus 时隐藏 outline，即利用 :focus-visible：
.btn:focus {
outline: none;
}
.btn:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
}
注意：IE 不支持 :focus-visible，若需兼容，可配合 focus-ring polyfill，或退而求其次，在 :focus 中用 outline: 2px solid transparent 占位，避免布局跳动。
JavaScript 主动 blur 防止焦点滞留
某些场景（如模态框关闭按钮、下拉项点击）需要点击后立即释放焦点，否则焦点卡在按钮上，影响后续 tab 导航。此时不能只靠 CSS：
- 给按钮加
onclick="this.blur();"最快见效，但混入 HTML 不利于维护 - 推荐在 JS 初始化时统一处理：
document.querySelectorAll('.btn').forEach(btn => btn.addEventListener('click', () => btn.blur())); - 若按钮触发了异步操作（如 API 调用），blur 应放在回调中，否则可能在动画未结束时就丢失焦点，造成 UX 断层
检查是否被第三方样式或框架覆盖
有时蓝色边框“顽固不消失”，不是 Bootstrap 本身问题，而是其他 CSS 干扰了层级：
- 检查开发者工具中，按钮的
:focus规则是否被!important强制覆盖（常见于重置 CSS 或 UI 组件库） - 确认没有全局设置
*:focus { outline: 2px solid blue !important; }这类暴力规则 - Vue/React 组件中，若按钮被包裹在
div且该div有tabindex="0"，焦点可能落在父容器而非按钮本身 —— 此时要查实际获得焦点的元素
真正难处理的是混合了 keyboard + mouse 交互的场景：比如用户先用 tab 切到按钮，再用鼠标点击 —— 此时 :focus-visible 仍应生效，但若 JS 中过早调用了 blur()，就会让键盘用户失去焦点线索。这种边界情况得靠真实测试，不能只看鼠标点击效果。
