blur-radius > 4px 卡顿是因高斯模糊计算量非线性增长，2px 查表无开销，6px 多遍卷积增载40%，12px 可能退软件渲染致掉帧；overflow: hidden 会裁剪阴影；轻量阴影推荐 shadow-[0_0_4px_rgba(0,0,0,0.06)] 且扩散为0；非必要场景可用边框+背景微调替代。
移动端 box-shadow 渲染慢，不是因为写法错，而是它触发了离屏渲染 + 高斯模糊计算，尤其在 iOS Safari 和低端安卓 WebView 中，blur-radius 超过 4px 就会明显掉帧。
为什么 blur-radius > 4px 就卡？
高斯模糊的计算量随 blur-radius 非线性增长：2px 用查表法几乎无开销；6px 开始多遍卷积，CPU/GPU 负载上升约 40%；12px 在 iPhone SE 或 Redmi Note 上可能退到软件渲染，动画直接掉到 30fps 以下。滚动中阴影“闪一下”，本质是 Safari 延迟绘制一帧，并非 bug，而是渲染策略。
overflow: hidden 是阴影消失的头号原因
box-shadow 渲染区域默认在元素盒模型之外，父容器只要有一层 overflow: hidden（包括 overflow: auto 且内容未溢出），阴影就会被暴力裁剪——DevTools 里样式正常，但就是看不见。
- 检查目标元素所有父级的
overflow计算值，不只看 CSS 声明，要看 computed 样式 - 别用
!important硬顶overflow: visible，优先改结构：把阴影加在 overflow 容器的子元素上 -
position: fixed元素要特别小心，它的 containing block 是 viewport，overflow: hidden往往来自html或body
用 shadow-[...] 替代预设类实现轻量外阴影
Tailwind 的 shadow-lg、shadow-xl 默认带大模糊和负扩散，专为卡片设计，套在 <pre class="brush:php;toolbar:false;"></pre> 或按钮上反而发虚、边缘晕染。代码块、小图标等高频元素需要的是「清晰边界感」，不是「立体浮起」。
立即学习“前端免费学习笔记（深入）”；
- 偏移保持
0：shadow-[0_0_4px_rgba(0,0,0,0.06)]，避免阴影漂移 - 模糊半径 ≤ 4px（推荐 2–4px），深色主题用
rgba(255,255,255,0.08)，浅色用rgba(0,0,0,0.06) - 扩散半径设为
0，禁用负值，防止阴影向内“吃”边框 -
<pre class="brush:php;toolbar:false;"></pre>常带overflow-x-auto，若父容器有overflow: hidden，必须解耦或换伪元素承载
真正容易被忽略的是：阴影是否必要
很多场景下，1px 边框 + 0.04 透明度的背景微调，比一层 box-shadow 更快、更稳、更易维护。iOS Safari 在低电量模式下会主动丢弃第二层以后的阴影，DevTools 里完全看不出异常。真机测试不是可选项，是必选项。
