box-shadow 是移动端动画卡顿的常见根源，因其强制 cpu 绘制、无法合成优化，且模糊半径增大导致显存平方级增长；应优先用预渲染背景图、drop-shadow 滤镜或伪元素渐变替代。
移动端 CSS 动画在低端机型上卡顿，往往不是因为“没开 GPU 加速”，而是某些属性本身就在透支渲染资源——box-shadow 就是典型代表，它在中低端 Android（尤其是 Android 5–7）和部分 iOS Safari 上会强制回退到 CPU 绘制，且无法被合成层优化。
box-shadow 为什么比你想象中更耗性能
box-shadow 看似只是加个阴影，但浏览器实际要为每个应用该样式的元素：生成模糊纹理、做高斯卷积计算、叠加多层绘制。这个过程属于 Paint 阶段，无法走合成线程，也无法被 transform 或 will-change 加速。
- 实测数据：在联发科 MT6737（Android 6.0）设备上，单个
box-shadow: 0 4px 12px rgba(0,0,0,0.15)会让 60fps 动画掉帧率 15–20%，叠加 3 个以上直接跌破 30fps - 更隐蔽的问题：父容器设了
overflow: hidden，子元素又带box-shadow+transform，某些安卓 WebView 会放弃图层合并，导致每帧重绘整块区域 - 阴影扩散半径（
blur-radius）每增加 2px，GPU 纹理尺寸呈平方级增长，显存占用翻倍
替代方案：用视觉近似换性能余量
不用 box-shadow 不等于放弃设计感。关键是在「看起来差不多」和「跑得动」之间做务实取舍：
- 静态场景优先用
background-image: url("shadow-sprite.png")，预渲染好阴影切片，零运行时开销 - 需要动态适配时，改用
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1))—— 它在支持的机型（Chrome 84+、Safari 13.1+）上可进合成器，但注意：不支持 spread 参数，且旧版安卓 WebView 中可能被忽略 - 列表项/卡片类组件，把阴影“下放”到伪元素：
::after { content: ""; position: absolute; bottom: -4px; left: 0; right: 0; height: 4px; background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent); }，纯色渐变，无模糊计算 - 绝对不要在
@keyframes里动画box-shadow的blur-radius或spread-radius—— 每一帧都在触发重绘
如何快速定位是不是 box-shadow 在拖后腿
别猜，用 Chrome DevTools 实锤：
- 打开
Rendering面板 → 勾选Paint flashing，滑动或触发动画，观察是否大面积绿色闪烁；若阴影区域持续高亮，就是它 - 切换到
Layers面板，搜索含box-shadow的元素，看是否生成了独立图层 —— 如果有，说明浏览器正试图“抢救”，但大概率失败 - 在
Performance面板录制动画过程，筛选Paint事件，点开任一长耗时记录，看 Call Stack 是否包含SkCanvas::drawPath或DrawShadow类调用
真正卡顿的根源，常常藏在“大家都这么写”的默认样式里。box-shadow 就是那个最常被复制粘贴、却极少被验证是否必要的属性。删掉它，有时比加 will-change 或 translateZ(0) 更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
