小屏幕 box-shadow 过渡不平滑主因是重排/重绘及 GPU 加速未启用；应慎用 will-change、固定 blur/spread 值、改用 transform/opacity 模拟浮起效果、限制阴影层数与绘制区域，并为 prefers-reduced-motion 提供降级方案。
小屏幕设备上 box-shadow 的 transition 不平滑，通常是因为浏览器在渲染阴影变化时触发了重排（reflow）或低效的重绘（repaint），尤其当阴影参数（如 blur、spread）动态变化时，GPU 加速未被有效利用，或动画帧率被限制在 60fps 以下。
用 will-change 提前提示浏览器优化
对频繁变化阴影的元素添加 will-change: box-shadow，可让浏览器提前为该属性分配图层并启用 GPU 加速。但注意不要滥用——仅在 hover/active 等明确有过渡的场景下设置，并在状态结束时移除（或用 class 控制）：
.card {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
will-change: box-shadow;
}
/* 可选：用 JS 在 mouseleave 后移除 will-change，避免长期占用资源 */
避免动态改变 blur/spread 值，改用位移 + 固定阴影
blur 和 spread 是高开销属性，小屏 GPU 处理慢。更轻量的做法是保持 box-shadow 的模糊值固定（如始终用 8px），只过渡 transform: translateY() 或 opacity 来模拟“浮起+加深”效果：
- 用
transform: translateY(-4px)模拟上浮，视觉上自然增强阴影感知 - 配合轻微
opacity: 0.98或filter: brightness(1.02)强化立体感 - 阴影本身用静态、中等强度值（如
0 6px 12px rgba(0,0,0,0.15)），不参与 transition
限制阴影层级与绘制区域
多层阴影（如 box-shadow: ... , ... , ...）会显著增加合成负担。小屏建议：
立即学习“前端免费学习笔记（深入）”；
- 最多使用 1–2 层阴影；避免叠加 >2 个 shadow
- 用
clip-path或overflow: hidden限制元素溢出，减少阴影绘制范围 - 避免在
position: fixed或z-index极高的元素上做阴影过渡（易触发全屏重绘）
用 prefers-reduced-motion 保底降级
对动画敏感或性能受限的用户，可通过媒体查询关闭过渡，提升基础体验：
@media (prefers-reduced-motion: reduce) {
.card {
transition: none;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.18); /* 静态强化版 */
}
}
