bootstrap按钮:focus外发光不明显是因为默认为内阴影式focus-ring，应覆盖box-shadow实现外发光，如box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25)，同时保留可访问性，避免直接删outline。
Bootstrap按钮:focus外发光不明显？直接覆盖box-shadow但别删outline
Bootstrap 5 默认的 .btn:focus 是内阴影式 focus-ring，视觉上像一层浅灰“压边”，尤其在深色背景或带边框按钮上几乎不可见。这不是 bug，是为可访问性保留语义轮廓的设计妥协。要让它真正“亮起来”，必须手动覆盖 box-shadow，但不能写 outline: none 就完事——得补上等效的视觉焦点反馈。
- 正确做法：保留
outline: none（移除默认 outline），再用box-shadow模拟外发光，例如box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) - 务必用 Bootstrap 的 CSS 变量（如
--bs-primary-rgb）而非硬编码颜色，否则主题切换时会失效 -
0.25rem对应默认$focus-ring-width，改大到0.3rem会增强范围，但再大易在小屏上溢出容器 - 加
:focus-visible更稳妥：.btn:focus-visible { outline: none; box-shadow: ... }，兼顾键盘用户和鼠标用户
想让发光动起来？用@keyframes + animation，别只靠:hover + transition
单纯用 :hover 配 transition 只能做“亮→更亮→暗”的线性过渡，缺乏呼吸感、节奏感。真要模拟霓虹灯或提示性脉冲，得上 @keyframes 动画——它能控制模糊半径、透明度、甚至多层阴影的错峰变化。
- 基础呼吸动画示例：
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 15px rgba(0, 123, 255, 0.4); } 50% { box-shadow: 0 0 35px rgba(0, 123, 255, 0.8); } } - 应用时加到按钮上：
.btn-glow { animation: pulse-glow 2s infinite ease-in-out; } - 避免用
animation-delay控制“起始时间”来假装平滑——它只延迟开始，不解决亮/灭突变问题；真正的平滑靠ease-in-out和 alpha 值渐变 - 移动端注意：iOS Safari 对超大
blur-radius（>100）可能降级渲染，建议基础值设 ≥40，再配合transform: scale(1.01)微触发高精度绘制
发光消失？先查overflow: hidden和父容器裁剪
写了 box-shadow: 0 0 60px rgba(100, 180, 255, 0.7) 却看不到光晕？90% 是被 overflow: hidden 截断了。box-shadow 的模糊溢出部分本质是“绘制在元素盒模型之外”，一旦父容器设了 overflow: hidden，这部分直接被裁掉，不是代码无效，是被物理抹除了。
- 检查目标按钮的直接父元素是否含
overflow: hidden、overflow: auto或border-radius（某些旧版 Safari 下圆角容器也会隐式裁剪） - 不要给发光按钮本身设
overflow: hidden，哪怕只是为了“防内容溢出”也不行 - 如果必须限制尺寸，改用
max-width/max-height或clip-path（更可控），而非overflow - 真机测试必做：模拟器常显示过强发光，iOS 实际渲染偏收敛，不测等于没调
多色流动光效？用多层box-shadow+错开animation-delay
单层 box-shadow 动画只能变强弱，要实现蓝→紫→粉的循环流动光，得叠加至少两层阴影，并让它们的动画周期或起始时间错开。伪元素（::before/::after）不是必须，纯 CSS 多层 shadow 就够用，更轻量、更稳定。
- 双层示例：
box-shadow: 0 0 20px rgba(0, 191, 255, 0.6), 0 0 40px rgba(138, 43, 226, 0.4); - 配动画时，定义两个 keyframes，比如
glow-blue和glow-purple，分别控制各自阴影的 alpha 和 blur - 或更简单：同一动画里分阶段改变多层值，例如
0% { box-shadow: 0 0 20px #0ff, 0 0 40px #f0f; } 50% { box-shadow: 0 0 20px #0f0, 0 0 40px #0ff; } - 性能提醒：每多一层 shadow，重绘开销略增；模糊值 >80 时，Firefox 渲染更稳，Chrome 在高 DPI 屏可能轻微锯齿，别盲目堆数值
blur-radius 也白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
