三层是视觉与性能的临界点，超过三层会显著增加合成层计算量、导致滚动悬停掉帧；基础态推荐两层：0 0 0 1px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.1)，hover态只调参数不增层数，避免重绘。
直接用大模糊、多层 box-shadow 做卡片阴影，滚动和悬停时容易掉帧——尤其在中低端安卓机和 iOS Safari 上，这不是你代码写得慢，是渲染路径被拖住了。
box-shadow 多少层才算安全？
三层是视觉与性能的临界点。超过三层（比如 0 1px 2px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.1), 0 12px 24px rgba(0,0,0,0.08), 0 20px 40px rgba(0,0,0,0.06)）会显著增加合成层计算量，Safari 尤其敏感。
- 基础态用两层足够：微边框 + 主投影，例如
0 0 0 1px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.1) - hover 态也维持两层，只调参数不增层数，避免浏览器跳变或重绘整层
- 真要模拟环境光淡影，改用
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.06))，它走 GPU 合成路径，比第四层box-shadow更稳
哪些参数组合会悄悄拖慢渲染？
不是所有数值都“看起来轻、跑起来快”。高 DPI 屏幕（如 iPhone 15 Pro、Pixel 8）对亚像素和小模糊极其敏感，这些写法实际更耗资源：
-
blur-radius小于 2px（比如0 2px 1px rgba(0,0,0,0.1)）：Safari 会反复重采样，反而糊且卡 - 混用单位：
0 0.5rem 4px rgba(0,0,0,0.1)强制浏览器做单位换算，移动端掉帧明显 - 颜色格式不统一：基础态用
rgba(0,0,0,0.1)，hover 态换成#0006，过渡直接失效，回退为硬切
transition 写在哪才真正生效？
很多人把 transition 放在 .card:hover 里，结果 hover 进去有动画，移出来“啪”一下跳回——因为默认状态没声明过渡行为，浏览器按“无动画”还原。
立即学习“前端免费学习笔记（深入）”；
- 必须写在常态选择器里：
.card { transition: box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); } - 禁用
transition: all：它会意外触发background-color、border等重绘属性，iOS WebView 中极易卡顿 - 别对
filter: drop-shadow()做过渡：它不支持硬件加速，过渡时 CPU 占用飙升
最常被忽略的是父容器——overflow: hidden 会裁掉扩大的阴影，但开发者往往只盯着卡片本身调参数，忘了检查 computed 样式里 box-shadow 是否真被渲染出来。
