<p>Bootstrap 5 的 shadow- 类可实现基础发光效果，但非真正霓虹发光；需自定义多层 box-shadow 类（如 btn-glow）并配合悬停增强、断点响应式控制及真机测试，避免滥用导致视觉干扰或性能问题。</p>
Bootstrap 5 中用 shadow- 类加 btn 实现基础发光感
Bootstrap 5 自带的阴影类（如 shadow-sm、shadow、shadow-lg）本质是 CSS box-shadow，它能模拟“发光”效果，但不是真正的霓虹发光（neon glow）。直接叠加在按钮上即可生效：
<button class="btn btn-primary shadow-lg">点击我</button>
注意：默认 shadow- 类只在常规状态生效，悬停时不会自动增强——如果想要“悬停更亮”，得自己补 CSS。
-
shadow-sm偏弱，适合内嵌按钮或轻量提示 -
shadow是中等强度，兼容性好，多数场景够用 -
shadow-lg在浅色背景上明显，但在深色背景可能被吃掉细节 - 别对
btn-outline-*按钮滥用shadow-：边框色 + 阴影容易糊成一团，尤其小尺寸下
要真正“发光”，必须手写 text-shadow 或多层 box-shadow
Bootstrap 不提供“霓虹发光”类，因为那需要多层 box-shadow（比如 0 0 5px #00f, 0 0 10px #00f）或配合 text-shadow。纯靠 Bootstrap 类做不到。
推荐做法：定义一个自定义类，复用到按钮上：
.btn-glow {
box-shadow: 0 0 8px #4dabf7, 0 0 16px #4dabf7;
}
.btn-glow:hover {
box-shadow: 0 0 12px #4dabf7, 0 0 24px #4dabf7, 0 0 36px #3b82f6;
}
关键点：
- 颜色选 Bootstrap 主题色（如
#4dabf7对应primary）能让视觉统一 - 避免用
rgba()做发光色——半透明叠多次会变灰，直接用纯色更通透 - 移动端慎用过强发光：部分安卓 WebView 渲染模糊，且耗电略高
响应式发光按钮的关键是断点控制阴影强度
发光效果在小屏上太强会抢眼、在大屏上太弱又不显眼。不能只靠 shadow-lg 一招吃遍天下。
正确做法是用 Bootstrap 的断点工具类 + 自定义媒体查询组合：
<button class="btn btn-primary btn-glow-sm">响应式发光</button>
然后在 CSS 中分层控制：
.btn-glow-sm {
box-shadow: 0 0 4px #4dabf7;
}
@media (min-width: 768px) {
.btn-glow-sm {
box-shadow: 0 0 8px #4dabf7, 0 0 16px #4dabf7;
}
}
@media (min-width: 992px) {
.btn-glow-sm {
box-shadow: 0 0 12px #4dabf7, 0 0 24px #4dabf7, 0 0 36px #3b82f6;
}
}
这样比单纯依赖 shadow- 类更可控。别忘了测试折叠菜单里的按钮——导航栏收起后，发光可能和 backdrop 冲突。
移动端真机测试时，box-shadow 渲染差异最常被忽略
iOS Safari 和部分安卓 Chrome 对多层 box-shadow 的抗锯齿处理不同，同一段代码在桌面 Chrome 看很柔和，到 iPhone 上可能边缘发虚或闪烁。
- 真机必测：用
devicePixelRatio > 2的设备看是否出现光晕撕裂 - 避免在
:active状态突然取消阴影——会造成“按下去就熄灯”的割裂感 - 如果按钮带图标（如
<i class="bi bi-arrow-right"></i>），发光阴影会包住整个元素，此时需检查图标是否被过度模糊 - 禁用
transform: scale(0.99)类微调——某些系统会触发阴影重绘异常，导致闪动
发光是视觉糖，但糖放多了会腻。优先保证按钮可点击区域、文字可读性、加载态一致性，再考虑加光。
