hover时发光阴影本质是多层box-shadow叠加，需同时设置外阴影模拟光晕与扩散光，并配合transition平滑过渡；基础写法为box-shadow: 0 0 15px rgba(0,123,255,0.6), 0 0 30px rgba(0,123,255,0.4)，避免使用inset内阴影遮挡文字，推荐用自定义class如.btn-glow覆盖bootstrap默认样式。
hover 时用 box-shadow 实现发光阴影
发光阴影本质是多层 box-shadow 叠加，不是单个模糊值就能出效果。关键在同时设置内阴影（模拟光晕）+ 外阴影（扩散光），并配合 transition 平滑过渡。
- 基础写法：
box-shadow: 0 0 15px rgba(0,123,255,0.6), 0 0 30px rgba(0,123,255,0.4); - 避免直接覆盖 Bootstrap 默认的
box-shadow（如btn-primary原本无阴影），建议用自定义 class 覆盖，比如.btn-glow - 别用
inset写内发光——它会遮挡按钮文字，真正发光是向外扩散的外阴影
hover 时用 transform 缩放但不破坏布局
缩放必须用 transform: scale()，不能用 width/height 改变尺寸，否则会触发重排、影响周围元素位置。
- 推荐缩放值：
transform: scale(1.05)（放大 5%），超过 1.1 容易显得突兀 - 必须搭配
transform-origin: center，否则默认从左上角缩放，视觉偏移明显 - 如果按钮含图标（如
<i class="bi bi-plus"></i>），缩放会连带图标一起动，无需额外处理
和 Bootstrap 的 btn 类共存要注意什么
Bootstrap 的 .btn 默认有 transition: all .2s，但只作用于 color、background-color、border-color，不包含 box-shadow 和 transform —— 这会导致你的 hover 效果卡顿或跳变。
- 必须显式重写
transition：transition: transform .2s ease, box-shadow .2s ease; - 不要用
!important强行覆盖 Bootstrap 的 transition，而是用更高优先级选择器，例如.btn.btn-glow:hover - 在
btn-outline-*类上加发光效果时，注意border-color和box-shadow颜色协调，否则光晕和边框色冲突
移动端触摸设备下要不要禁用 hover
不用主动禁用，但得知道：iOS Safari 和部分安卓浏览器在 touch 设备上不会触发 :hover（除非用户点一下才临时激活）。这不是 bug，是规范行为。
- 如果需要触控反馈，改用
:active模拟按压态：.btn-glow:active { transform: scale(0.98); } - 别依赖
hover做关键交互提示（比如仅靠发光表示可点击），按钮本身语义（btn类）和颜色对比度才是可访问性基础 - 真要兼容所有场景，就得 JS 监听
touchstart/touchend动态加 class，但多数项目没必要——发光只是装饰，非功能必需
实际最常被忽略的是 transition 属性没重写，导致发光和缩放不同步；还有人把 scale(1.2) 和强光晕一起用，结果按钮像突然“弹出来”，反而降低可信度。效果越轻，越容易融入界面。
