box-shadow悬停发光必须配合transition才能实现平滑动画，仅设置box-shadow会导致瞬切效果；需单独声明transition: box-shadow 0.3s ease，初始值设为box-shadow: 0 0 0 0 transparent，并注意兼容性与视觉协调。
box-shadow 悬停发光必须配 transition 才有动画
只写 box-shadow 不会动，浏览器默认是“瞬切”，要让光晕慢慢展开或收拢，transition 是刚性依赖。常见错误是只加了悬停的 box-shadow，但没声明过渡属性，结果效果一闪而过，像没生效。
- 必须对
box-shadow单独过渡：transition: box-shadow 0.3s ease;（不能只写transition: all 0.3s;，否则可能意外触发其他属性动画） - 初始状态的
box-shadow值不能省略，建议显式设为box-shadow: 0 0 0 transparent;，避免从无到有时出现跳变 - 如果按钮本身有边框或背景渐变，
box-shadow的扩散范围容易被裁剪，检查父容器是否设置了overflow: hidden;
发光强度和模糊半径怎么选才自然
太强像灯泡，太弱看不出变化。关键不是数值大，而是“对比感”：正常态用极小值（甚至 0），悬停时用中等扩散+低色差。
- 推荐起手组合：
默认：box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
悬停：box-shadow: 0 0 12px 4px rgba(0, 123, 255, 0.3); -
12px控制光晕软硬（越大越虚），4px是外扩距离（决定光是否“包住”按钮边缘） - 避免用纯白/纯黑：
rgba(255, 255, 255, 0.5)在深色背景上易过曝，换成带主色倾向的值更协调（比如按钮蓝就用rgba(0, 123, 255, 0.3)）
IE 和旧版 Safari 不支持 inset 外发光？不，是 transition 支持有问题
真正掉坑里的是兼容性断层：IE10+ 和 Safari 6.1+ 都支持 box-shadow，但老 Safari 对 transition 的属性名识别不稳定，尤其当值含多个阴影时。
- 不要写多组
box-shadow同时过渡（如box-shadow: 0 0 5px red, 0 0 15px blue;），老 Safari 可能直接忽略整个 transition - 稳妥做法：只用一组阴影，颜色用带透明度的主色，靠
blur和spread营造层次 - 如果必须兼容 IE9 及以下——放弃 transition，改用 JS 监听
mouseenter/mouseleave手动增删 class，但这类场景现在极少
按钮尺寸变化时发光错位？因为 box-shadow 不随 transform 缩放
如果按钮用了 transform: scale(1.05) 配合发光，会发现光晕没跟着放大，边缘发虚或偏移。这是因为 box-shadow 是基于元素原始尺寸渲染的，不受 transform 影响。
- 方案一（推荐）：去掉 scale，只靠
box-shadow的视觉膨胀感模拟“变亮变大”，更轻量也更稳 - 方案二：若必须缩放，把
box-shadow的blur和spread值同步调高（比如 scale 1.05 时，shadow 的 blur 从 12 改成 14），但需实测微调 - 绝对别用
width/height动画来模拟放大——重排代价高，且和 shadow 完全不同步
color 变深、transform: translateY(-1px)），否则光晕再漂亮，整体也显得“浮”——这和 shadow 无关，但用户感知就是它“没活过来”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
