Bootstrap 5按钮:focus默认为内阴影式focus-ring，视觉不明显；应覆盖为.box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25)实现外发光，并优先用:focus-visible兼顾可访问性与体验。
Bootstrap 按钮 focus 时没有外发光？默认 focus-ring 是内阴影
bootstrap 5 默认启用 focus-ring，但它的 box-shadow 是围绕元素内边距绘制的（即“内发光”感），视觉上不明显，尤其在深色背景或按钮本身带边框时，几乎看不到焦点反馈。这不是 bug，是设计选择——为可访问性保留焦点轮廓，但牺牲了视觉强度。
要实现真正「外发光」效果（即清晰、扩散、向外延伸的阴影），必须覆盖默认 :focus 样式，并确保不破坏键盘导航可用性。
如何用 CSS 覆盖 Bootstrap 的 button:focus 并加外发光
直接在按钮上加 :focus 伪类并设置 box-shadow 即可，但要注意三点：保留 outline: none 的同时不能移除焦点轮廓语义；避免用 !important 破坏主题变量继承；优先使用 Bootstrap 的颜色系统变量保持一致性。
- 推荐写法：
.btn:focus { outline: none; box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); } - 若想适配不同按钮类型（如
.btn-secondary），可配合data-bs-theme或用currentColor动态取色 - 注意
0.25rem是 Bootstrap 默认$focus-ring-width，改大它会增强发光范围，但别超过0.3rem，否则在小屏上易误触溢出 - 务必保留
outline: none后补box-shadow，否则屏幕阅读器用户会失去焦点指示
为什么 focus-visible 更安全？什么时候该用它
直接用 :focus 会导致鼠标点击后也触发发光（干扰体验），而 :focus-visible 只在键盘操作（Tab）或辅助技术聚焦时生效，更符合 WCAG 交互逻辑。
- 替换上面的
:focus为:focus-visible即可：.btn:focus-visible { outline: none; box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); } - 注意兼容性：Chrome 86+、Firefox 86+、Safari 15.4+ 原生支持；旧版 Safari 需加
@supports selector(:focus-visible)回退 - Bootstrap 5.3+ 已在部分组件中默认启用
focus-visible，但.btn仍用:focus，所以需手动覆盖
自定义主题时怎么让发光色随按钮变色
硬编码颜色值会让 .btn-success、.btn-warning 等失去对应发光色。Bootstrap 提供了 --bs-btn-color、--bs-btn-bg 等 CSS 变量，但没直接暴露「发光透明度色值」——得自己算。
- 最简方案：用
color-mix(in srgb, currentColor 25%, transparent)（Chrome 111+ 支持） - 兼容方案：为每种按钮类单独写规则，复用其
rgba()值：.btn-primary:focus-visible { box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .btn-success:focus-visible { box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } - 别用
filter: drop-shadow()—— 它不响应border-radius，圆角按钮发光会锯齿
外发光本质是视觉强化，不是功能替代。只要 box-shadow 足够清晰、尺寸合理、颜色可辨，且未屏蔽 focus-visible 逻辑，就既满足设计需求，也不牺牲可访问性。最容易被忽略的是：在深色模式下测试发光是否仍可见——很多 rgba 值在暗背景下直接失效。
