box-shadow transition卡顿主因是浏览器未启用gpu合成，属重绘属性，且混入非合成属性会导致整链降级；须显式声明、统一5参数结构、用translatez(0)提层并验证绿色边框。
为什么box-shadow transition会卡顿
浏览器默认不为 box-shadow 启用 GPU 合成，它属于“重绘属性”，每次变化都要重新计算阴影渲染，尤其在模糊半径（blur-radius）较大或扩散半径（spread-radius）非零时，CPU 开销陡增。更隐蔽的问题是：只要 transition 里混入任意一个非合成属性（比如 background-color 或 left），整条过渡链就会降级——不是阴影卡、其他不卡，而是全部掉帧。
必须显式声明 box-shadow 并统一参数结构
常见错误是起始值写 box-shadow: none;，或 hover 时漏掉某个参数（比如只改了模糊值，没写偏移和颜色）。浏览器无法插值，直接跳变或卡住。
- 初始状态必须写满 5 个参数：
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); - hover 状态也必须一一对应：
box-shadow: 0 8px 24px 2px rgba(0,0,0,0.25); - 绝对避免从
none→ 有值、或从inset→ 非inset切换 - 过渡声明要放在默认状态，且只针对
box-shadow：transition: box-shadow 0.3s ease-in-out;
强制 GPU 加速但别乱用 will-change
will-change: box-shadow 在 iOS Safari 旧版无效，在 Android 4.4 可能闪烁；全局写 * { will-change: transform; } 更是高危操作。真正稳妥的做法是：
- 给元素加
transform: translateZ(0);或backface-visibility: hidden;（IE11 下后者更稳） - 避免同时设置
filter、overflow: hidden或mask的父容器——它们会压制子元素提层 - 验证是否真提层：Chrome DevTools → Rendering → 勾选 “Layer borders”，看到绿色边框才算成功
阴影差值太小或缓动不合理也会“显得卡”
不是所有卡顿都来自性能瓶颈，有时只是视觉反馈弱。比如从 0 2px 4px 到 0 3px 6px，人眼根本察觉不到变化，会误判为卡死或没生效。
- 增大起止对比：模糊半径至少翻倍，扩散半径从
0→2px，透明度从0.1→0.25 - 慎用
ease，改用cubic-bezier(0.25, 0.46, 0.45, 0.94)让阴影“弹出”更自然 - 如果配合
transform（如上移），记得把两个 transition 合并写：transition: transform 0.3s, box-shadow 0.3s;，否则可能不同步
真实卡顿往往藏在“看起来没问题”的组合里：父容器加了 filter: blur(1px)，你却在子元素上猛加 will-change；或者 hover 时悄悄改了 border-color，却忘了它和 box-shadow 共享同一条过渡链。优化得先看层，再调参，最后验效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
