box-shadow动画掉帧主因是层叠上下文失控导致合成层爆炸。父容器设opacity、transform等会锁死阴影更新范围，强制重绘整层；应给直接父容器设will-change: transform或contain: paint，避免子元素各自建层。
box-shadow 本身不触发重排（reflow），但频繁变化或叠加不当会引发大面积重绘（repaint）甚至合成层爆炸，根源常在层叠上下文失控。
为什么 box-shadow 动画会让页面掉帧
浏览器对 box-shadow 的硬件加速依赖合成层（compositing layer），但一旦父容器意外创建新层叠上下文（如设置了 opacity、transform、filter 或 will-change），子元素的阴影就被“锁死”在该层内，无法独立更新。结果是：本该只重绘卡片阴影的区域，却强制重绘整个父容器图层。
- 常见诱因：
opacity: 0.99、transform: translateZ(0)、filter: blur(0.5px)这类看似无害的声明，实际都会创建新层叠上下文 - 检查方法：Chrome DevTools → Rendering → 勾选 “Layer borders”，看阴影是否被包裹在异常大的绿色边框里
- 动画中改
box-shadow时，若同时有transform变化，浏览器可能放弃优化，退回到软件渲染
如何安全启用硬件加速而不炸开层叠上下文
别对阴影元素本身加 will-change: transform —— 它会强制提升图层，但代价是内存占用飙升且易泄漏。真正要控制的是“谁来承载阴影的合成”。
- 给阴影元素的**直接父容器**设
will-change: transform，而非元素自身；这样阴影能复用父层，避免子元素各自建层 - 确保父容器没有
overflow: hidden或clip-path，否则会裁切阴影且阻止图层合并 - 用
contain: paint显式声明渲染边界，比will-change更轻量、更可控 - 移动端慎用
transform: translateZ(0)：iOS Safari 对此类 hack 的图层管理极不稳定，优先用contain
多层 box-shadow 和层叠上下文的冲突表现
当一个卡片用了 3 层 box-shadow，又嵌在 position: fixed 的导航栏下，阴影突然变淡或消失——这不是参数错了，是固定定位容器自带层叠上下文，把阴影“关”在了视口层内，无法穿透到 body 背景上。
- 真机测试必做：Safari 在低电量模式下会主动丢弃第 2 层以后的阴影，DevTools 里完全看不出
- 修复关键：把卡片移出
fixed容器，或让卡片父级设isolation: isolate，显式隔离其层叠环境 - 避免
z-index乱用：给卡片设z-index: 1不会拉高阴影层级，阴影始终依附于元素所在层叠上下文，不是靠 z-index 提升的 - 用
backface-visibility: hidden替代部分will-change场景，它也能触发合成但不创建新上下文
最易被忽略的一点：层叠上下文不是“开关”，而是“嵌套容器”。你改一个 opacity，可能无意中把整片卡片列表都拖进同一个合成层——性能问题往往不出现在阴影本身，而出现在它被塞进去的那个“房间”里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
