DPR放大blur-radius和spread-radius导致阴影变糊发虚，应控制blur-radius≤4px、spread-radius为偶数0或2px，改用rem单位并设可控根字号，圆角大时需限制阴影总值≤border-radius×0.8，X5内核反直觉提blur至6–8px更顺滑。
blur-radius 和 spread-radius 被 DPR 放大了
不是你写的颜色太深，而是设备像素比（DPR）把 blur-radius 和 spread-radius 当作物理像素放大渲染了。DPR=2 时，4px 实际按 8px 画，阴影立刻变糊、变浓、边缘发虚。iOS Safari 和安卓高端机尤其明显。
- 把
blur-radius控制在 ≤4px，推荐用2px或4px；超过6px在 DPR≥2 下基本不可控 -
spread-radius尽量为0；必须用则选偶数（如2px），避免-1px或3px这类奇数值在部分 WebView 中行为异常 - 透明度要同步降档：
rgba(0,0,0,0.08)在 DPR=2 下视觉浓度 ≈ DPR=1 下的0.12，别沿用桌面端的0.15～0.2
用 rem 替代 px 写阴影值更稳
px 是绝对单位，不会随系统缩放或字体调整变化，而移动端用户常开“更大字体”或“显示缩放”，导致按钮尺寸微调但阴影僵直不动，视觉脱节。
- 统一用
rem：例如box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.08)（对应 2px/4px @16px 基准） - 根字号必须可控：用
clamp(14px, 1vw, 16px)或 JS 动态设:root { font-size }，否则rem失效 - 别用
em——嵌套深时继承链混乱；也别用vh/vw——滚动时阴影忽大忽小
圆角 + 阴影组合时容易断边
高 DPR 下，border-radius 的像素边界和阴影模糊区对不齐，尤其当 blur-radius + spread-radius > border-radius × 0.8（DPR=1 下）时，iOS 上阴影直接被裁成锯齿或消失。
- 先算安全上限：若
border-radius: 8px，则blur-radius + spread-radius ≤ 6px（即4px + 2px就是极限） - 圆角大的卡片，宁可牺牲一点立体感，也要把
blur-radius压到2px，再靠opacity微调层次 - 禁用
overflow: hidden父容器——它和圆角一起构成 iOS 的“双重封印”，阴影必断
微信 X5 内核下阴影锯齿严重
微信内置浏览器（X5）对 subpixel 渲染支持弱，小 blur-radius（≤ 4px）反而更容易出现硬边、块状锯齿，不是模糊不够，是渲染精度崩了。
立即学习“前端免费学习笔记（深入）”；
- 反直觉但有效：把
blur-radius提到6px～8px，配合稍大的v-offset（如4px），边缘反而更顺滑 - 别在
@media (max-width: 375px)里直接缩放整个元素，应单独写媒体查询改阴影：比如小屏下用inset 0 1px 3px rgba(0,0,0,0.1) - 真机调试不能信 DevTools 模拟器——X5 的渲染逻辑和 Chrome 完全不同，务必连真机用 Chrome Remote Debug 查看
transform: scale(0.95) 的卡片，在 iOS 上既触发了合成层又改变了 DPR 映射关系，此时再加 box-shadow，连 translateZ(0) 都不一定能救回来。 
