按钮点击后出现蓝色边框是浏览器默认:focus轮廓，用于可访问性；可通过.btn:focus{outline:none;box-shadow:none}移除，但应替换为border或背景色等视觉反馈以保障键盘用户操作。
为什么按钮点击后总有蓝色边框
这是浏览器默认的 :focus 样式，不是 Bootstrap 特有行为。Chrome、Edge、Firefox 都会在键盘 Tab 切入或鼠标点击后给可聚焦元素（比如 <button></button>）加一个蓝色（或系统色）轮廓，用于辅助访问——但很多 UI 设计里它显得突兀，尤其在纯点击场景下。
用 CSS 移除 focus 轮廓最直接的方式
Bootstrap 本身已提供 .btn:focus 的重置逻辑，但默认只对 outline: none 做了部分覆盖，且受优先级和伪类顺序影响容易失效。稳妥做法是显式覆盖：
.btn:focus {
outline: none;
box-shadow: none;
}
- 必须加
!important吗？一般不用，但如果你的自定义样式表加载顺序在 Bootstrap 之后，且没提高选择器权重，就可能被覆盖——这时加outline: none !important最省事 - 别只写
outline: 0：某些旧版浏览器（如 IE11）对0解析不一致，none更可靠 -
box-shadow: none要一起清：Bootstrap 的.btn-primary:focus等会加box-shadow，单清outline不够
保留可访问性，但换种方式呈现焦点
粗暴清掉 outline 会让键盘用户失去焦点指示，违反 WCAG。更合理的做法是用其他视觉线索替代：
- 改用
border或background-color变化：比如.btn:focus { border-color: #0056b3; } - 仅对鼠标操作禁用轮廓，保留键盘焦点：用
:focus:not(:focus-visible)配合outline: none，但注意 Safari 支持较晚（v15.4+） - 全局开关（慎用）：
*:focus { outline: none; }会破坏所有可聚焦元素的可访问性，不推荐
Vue/React 项目里按钮动态渲染时的坑
如果按钮是组件内动态生成（比如 v-for 或 .map()），容易漏掉对 disabled 状态的处理：
-
disabled按钮不会触发:focus，但用户可能误点后疑惑“为什么没反馈”——建议加cursor: not-allowed和透明度降低 - 使用
data-bs-toggle的 Bootstrap 组件（如折叠、下拉）自带 focus 样式，需额外查文档看是否暴露了focus-visible类名来定制 - 第三方图标按钮（如
<button><i class="bi bi-x"></i></button>）若未设tabindex="0"，可能跳过焦点管理，导致样式失效
真正要动的往往不是“怎么去掉”，而是“去掉之后用户怎么知道当前焦点在哪”。多数项目卡在这一步，不是 CSS 写不对，是没想清楚交互链路。
