box-shadow 不能用 will-change 加速，因其属重绘属性，不触发合成；应改用 transform 或 opacity 实现阴影动效。
box-shadow 本身不能用 will-change 加速，强行写 will-change: box-shadow 不仅无效，还会浪费 GPU 内存。
为什么 will-change: box-shadow 没用
浏览器只对能触发合成（compositing）的属性做图层提升，box-shadow 属于“重绘”（paint）级属性，不满足条件。Chrome、Safari 等现代浏览器会直接忽略该声明，但依然会分配额外内存维持一个空图层——等于白占资源。
- 真正支持
will-change的动画属性只有transform和opacity（极少数场景下filter也部分支持，但不稳定） -
box-shadow动画卡顿的本质是每帧都要重新计算像素模糊，无法走 GPU 合成线程 - DevTools 的 Layers 面板里看不到因
will-change: box-shadow新建的图层，就是最直接的证据
想让阴影动得流畅，得绕开 box-shadow 本身
核心思路：把“变化”转移到 transform 或 opacity 上，让阴影作为静态视觉元素存在。
- 用伪元素承载阴影：
::before固定画好box-shadow，主元素只做transform: translateY()悬浮位移 - 多层卡片堆叠时，给父容器加
transform: translateZ(0)创建独立合成上下文，避免子元素阴影被裁切 - 需要“阴影变深”效果？改用
opacity控制一个半透黑遮罩层的显隐，而非动态改box-shadow的 alpha 值 - 响应式中减小阴影尺寸：用媒体查询切换预设的 class，而不是在动画中实时修改
blur-radius
哪些 will-change 写法真有用
只在交互触发前一刻设置，并严格匹配后续实际变化的属性。
- 卡片悬停上浮 + 阴影增强 →
will-change: transform, opacity（对应transform: translateY(-4px)+opacity: 0.98） - 侧滑菜单展开 →
will-change: transform（仅transform: translateX()） - 绝对定位弹窗淡入 →
will-change: opacity（配合transition: opacity 0.2s） - 千万别写：
will-change: all、will-change: left top、will-change: box-shadow
真正容易被忽略的是：阴影是否必须“动”？很多时候用户感知到的“立体感增强”，靠微调 transform 位移 + 固定阴影就足够了，根本不需要让 box-shadow 参与过渡。省掉那一行 transition: box-shadow 0.3s，性能和维护性都更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
