Bootstrap 按钮(Button)增加外发光效果 focus-shadow-Bootstrap教程-PHP中文网

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 交互逻辑。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

替换上面的 :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);
}