ios设备dpr导致box-shadow模糊半径被放大，使阴影发灰、边缘失焦；需控制blur-radius在2px～4px、spread-radius为0或偶数，并强制合成层及避免负值裁切。
不是颜色值写错了，是设备像素比（DPR）把 blur-radius 和 spread-radius 实际渲染放大了——iOS 设备 DPR=2 或 3 时，你写的 box-shadow: 0 2px 8px rgba(0,0,0,0.1) 中的 8px 模糊半径会被按 16px 或 24px 渲染，边缘糊开、浓度上浮，视觉上就是“颜色过深”或“发灰蒙蒙的一团”。
blur-radius 被 DPR 放大导致边缘失焦
高 DPR 屏幕下，CSS 像素 ≠ 物理像素。浏览器对 box-shadow 的模糊采样是在物理像素层做的，所以逻辑上 4px 的 blur-radius 在 iPhone 13（DPR=3）上实际模糊宽度≈12px，远超设计预期。
- 推荐把
blur-radius控制在2px～4px之间，超过4px就容易糊成一片 -
spread-radius尽量设为0；非用不可时选偶数（如2px），避免 Safari 解析异常 - 别指望靠调低透明度“补救”——
rgba(0,0,0,0.05)在 DPR=2 下仍可能视觉等效于桌面端的 0.12，必须同步压参数
iOS Safari 合成层缺失让阴影“浓得不自然”
当元素没触发独立合成层（compositing layer）时，WebKit 会降级渲染 box-shadow：要么跳过模糊计算，要么用更粗糙的算法填充，结果就是阴影边缘生硬、局部浓度突兀，看起来像“加深了一块”。
- 给带阴影的元素加
transform: translateZ(0)，强制创建轻量合成层（比translate3d(0,0,0)更稳） - 绝对避免父容器同时设
overflow: hidden和border-radius，这是 iOS 的“双重封印”，阴影会被裁剪+降级双杀 - 如果阴影只在滚动中变深，检查是否用了
will-change: transform——它可能干扰合成策略，换成transform: translateZ(0.1px)更可靠
负 spread-radius 在 Safari 里会掐断模糊过渡区
比如 box-shadow: 0 2px 4px -2px rgba(0,0,0,0.1)，在 iOS 15.4 及更早版本中，负 spread-radius 会剧烈收缩阴影区域，导致模糊边缘被“掐掉”，露出未模糊的原始色块——浅背景上看着就是一条黑边，深背景上则像一块突兀的深色淤青。
- 避免
blur-radius≤4px时配负spread-radius - 若必须收边，改用
box-shadow: 0 0 0 1px rgba(0,0,0,0.08)模拟描边，它不触发模糊裁切 - 调试时临时加
background-color: #000，如果黑边消失，说明是背景透出造成的视觉错觉，不是阴影本身过深
真正难调的从来不是 rgba() 里的数字，而是 blur-radius 和 spread-radius 在不同 DPR 下的等效视觉尺寸。哪怕你把所有参数都设对了，只要没在真机上用 Safari 和 Chrome 同时滚动验证，就还剩一层隐藏的渲染偏差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
