直接用box-shadow配合transition实现按钮Hover发光阴影，需显式覆盖Bootstrap默认box-shadow:none，推荐模糊值8–16px、使用CSS变量如var(--bs-primary)，并明确声明transition属性避免覆盖原生过渡节奏。
按钮Hover时发光阴影怎么加
直接用 box-shadow 配合 transition 就能实现，但要注意 Bootstrap 默认会重置部分 CSS 属性，尤其是 button 的 border 和 outline。如果没看到发光效果，大概率是阴影被默认的 box-shadow: none 覆盖了。
实操建议：
- 必须显式覆盖 Bootstrap 的
box-shadow，比如写.btn-glow:hover { box-shadow: 0 0 12px rgba(0,123,255,0.6); } - 避免用太强的模糊值（如
30px），否则在高 DPI 屏幕上容易糊成一团，推荐8–16px区间 - 颜色别硬写
#007bff，优先用 Bootstrap 的 CSS 变量，比如var(--bs-primary)，方便主题切换 - 注意移动端不会触发
:hover，这个效果本质是桌面端增强，别把它当核心交互依赖
缩放动画和发光怎么同时生效
关键不是“叠加”，而是统一用 transform + box-shadow 在同一个 transition 中声明——否则浏览器可能因渲染时机不同步导致卡顿或闪烁。
实操建议：
- 把两个属性写进一条
transition：transition: transform 0.2s ease, box-shadow 0.2s ease; - 缩放用
transform: scale(1.05)，别用width/height改变尺寸，否则会触发重排（reflow） - 慎用
transform: scale(1.1)以上，文字边缘容易发虚，尤其在 Chrome 下 - 如果按钮内含图标（比如
<i class="bi bi-plus"></i>），记得给图标也加display: inline-block，否则scale可能错位
和 Bootstrap 按钮类（如 btn-primary）共存要注意什么
Bootstrap 的 .btn 类自带 transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;，它已经声明了 box-shadow 过渡，但没声明 transform。如果你只写 transition: all .2s，反而会覆盖掉 Bootstrap 原有的过渡节奏，导致 hover 时颜色变化突兀。
实操建议：
- 不要用
all，明确列出要过渡的属性：transition: transform 0.2s ease, box-shadow 0.2s ease; - 若需保留原有颜色过渡，可以补上：
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, transform 0.2s ease, box-shadow 0.2s ease; - 用
!important强制覆盖时要小心——Bootstrap 5.3+ 的.btn:focus也依赖box-shadow，冲突会导致焦点样式失效 - 最好用自定义类名（如
.btn-glow）单独扩展，而不是直接改.btn的基础样式
为什么有时动画卡顿或闪烁
常见原因是 transform 和 box-shadow 触发了不同的渲染层，尤其当按钮父容器有 overflow: hidden 或 will-change: auto 时，GPU 加速可能被抑制。
实操建议：
- 给按钮加
will-change: transform;（仅 hover 前），但别对所有按钮全局加，会增加内存开销 - 避免在
:hover中同时修改padding或margin，这会强制重排，抵消transform的硬件加速优势 - 检查是否用了
filter: drop-shadow()替代box-shadow—— 它性能更差，且不支持inset，纯发光场景没必要 - 真遇到卡顿，先禁用其他 CSS 动画或 JS 事件监听器，确认是不是叠加效应导致的帧率下降
transform: scale(1.03) 和 box-shadow: 0 0 6px rgba(0,123,255,0.4)，再微调时间，比一上来就拉满参数更容易控制。 
