在前端开发中，Bootstrap 按钮的焦点（focus）样式是一个容易被忽略但直接影响用户体验的细节。Bootstrap 5 默认使用的 box-shadow: inset 0 0 0 0.25rem rgba(...) 本质上是一种“内发光”效果——这在深色背景或带边框的按钮上几乎形同虚设，肉眼很难捕捉到焦点变化。这并非 Bug，而是设计上的妥协：它试图在兼顾可访问性的同时，不破坏按钮的视觉完整性，但代价是焦点反馈不够醒目。
如何把内阴影改成外发光？
核心操作是直接覆盖 .btn:focus 的 box-shadow 属性，并且务必去掉 inset 关键字：
.btn:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}这里有几个容易踩坑的细节：
- 光晕半径并非越粗越好：
0 0 0 0.25rem这段参数中，0.25rem 控制的是光晕向外扩展的幅度。缩到 0.15rem 会显得纤弱无力；放大到 0.3rem 则可能模糊边缘，反而影响辨识度。 - 带边框按钮需要额外处理：如果按钮本身有
border，建议同步提高box-shadow的模糊值，比如改成0 0 0.3rem 0.25rem，否则光晕会紧贴边框边缘，视觉效果会显得局促。 - Chrome 的 outline 陷阱：Chrome 89 以上版本对
outline-style: auto的渲染比较特殊，单纯设置outline: none无法彻底清除原生蓝边。必须靠调整box-shadow来解决问题。
为什么改了 .btn:focus 还是闪一下蓝边？
这个问题很常见——焦点状态并非只有单一的触发路径。鼠标点击、键盘 Tab、JS 动态添加激活状态，这些场景下对应的 CSS 选择器各不相同。具体来说：
- 鼠标点击松手前一帧触发的是
.btn:active:focus - Toggle 按钮激活状态走的是
.btn.active:focus - JS 动态添加 class 时可能是
.btn.focus
漏掉任何一条路径，都会在特定操作下出现“闪一下原生蓝边”的尴尬情况。
稳妥的方案是一次性覆盖所有可能的组合：
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
outline: none;
}需要注意几点：
outline: none必须与box-shadow同时出现。旧版 Firefox 在缺少 outline 声明时会 fallback 显示原生虚线框，破坏整体一致性。- Bootstrap 4 及更早版本的 JS 插件（如 dropdown、collapse）依赖
.focus类来维持焦点状态，如果不覆盖这个类，组件的焦点反馈可能会出现缺失。 - 不推荐使用
outline: 0——Safari 下可能存在异常渲染，统一使用outline: none更安全。
键盘用户和鼠标用户如何兼顾？
直接全局禁用 outline 或 box-shadow 会让键盘 Tab 用户彻底失去焦点感知，违反 WCAG 2.1 AA 标准。正确的做法是根据交互来源区分处理：
.btn:focus:not(:focus-visible) {
box-shadow: none;
}
.btn:focus-visible {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}这里的关键机制：
:focus-visible是浏览器专门用于识别“键盘聚焦”的伪类。鼠标点击不会触发这个状态，因此可以避免“点一下就亮、再点一下又灭”的视觉闪烁。- iOS Safari 15.4 之前的版本不支持
:focus-visible，因此需要双保险策略：先设置.btn:focus为外发光，再用:not(:focus-visible)拦截鼠标点击路径。 - 别忘了其他可聚焦元素——
.form-control:focus、.custom-select:focus等同样需要统一处理。焦点体验的割裂往往比完全没有焦点反馈更让用户困惑。
容器与兼容性问题：改了 CSS 却没效果？
即使 CSS 写得完全正确，也未必能在界面上看到预期效果。常见的问题出在容器层或者渲染限制上：
.btn-group > .btn的 border-radius 陷阱：Bootstrap 的按钮组选择器会强制设置border-radius: 0，导致外发光被裁切掉。需要额外重置：.btn-group > .btn:focus { border-radius: 0.375rem; }- 父容器的 overflow 影响：如果父容器设置了
overflow: hidden（比如卡片或模态框），box-shadow会被直接剪掉。解决方案是给父级加overflow: visible，或者留足 padding 空间。 - 移动端 Safari 兼容性：移动端 Safari 对
:focus的支持不太稳定，尤其在软键盘弹出后。建议使用双声明：.btn:focus-visible, .btn:focus。 - Tailwind 冲突：如果项目中同时使用了 Tailwind 的
@tailwindcss/forms插件，它的焦点样式可能覆盖 Bootstrap 的设置。需要确认 CSS 加载顺序，或者在@layer base中统一接管。
说到底，写出那几行 CSS 并不难，真正考验功力的是：确保在任何设备、任意交互方式（Tab 键、鼠标点击、触屏、语音）下，焦点始终可定位、可预测、不突兀。这往往是上线前最容易忽视的细节，但在无障碍审计中几乎次次被列为必查项。
