移动端阴影“发灰”是因dpr放大blur-radius和spread-radius导致边缘糊开、浓度上浮；需将blur-radius控制在4px内（推荐2px～4px）、spread-radius设为0或偶数、透明度同步下调至rgba(0,0,0,0.08)。
为什么移动端阴影会“发灰”而不是变深
这不是颜色写错了，是设备像素比（DPR）把 blur-radius 和 spread-radius 实际渲染放大了。DPR=2 时，box-shadow: 0 2px 8px rgba(0,0,0,0.1) 的 8px 模糊会按 16px 渲染，边缘糊开、浓度上浮，视觉上就是一片灰蒙蒙的雾气。
必须改的三个参数值
别调颜色，先压参数。高 DPR 屏幕下，阴影的“逻辑像素”和“物理像素”不是 1:1 关系，靠降透明度补救只是掩耳盗铃。
-
blur-radius控制在4px以内（推荐2px或4px），超过就容易失焦 -
spread-radius尽量为0；非用不可时选偶数（如2px），避免 Safari 解析异常 - 透明度必须同步下调：
rgba(0,0,0,0.08)在 DPR=2 下 ≈ DPR=1 下的0.12，所以别用0.15这类桌面惯用值
iOS Safari 阴影“消失”或忽隐忽现怎么办
根本不是 CSS 失效，是 WebKit 对未触发合成层的元素直接裁剪掉 box-shadow 渲染路径——尤其当父容器有 overflow: hidden 或元素本身是 position: fixed 时。
- 给带阴影的元素加
transform: translateZ(0)（比translate3d更轻量），强制创建独立合成层 - 绝对避免父级同时设
border-radius和overflow: hidden，这是 iOS 的“双重封印”，阴影必被吞 - 如果阴影在滚动中闪烁，检查是否用了
will-change: transform—— 它可能干扰合成策略，换成transform: translateZ(0.1px)更稳
深色背景下的阴影怎么不突兀
currentColor 在 box-shadow 里根本读不到背景色，它只继承元素自身的 color 值。指望它自动适配深色/浅色背景，结果只会是黑块或白块。
- 深色背景（如
#1e1e1e）用浅灰+极低透明度：box-shadow: 0 2px 8px rgba(255,255,255,0.06) - 别用
hsl()直接减明度，要轻微提亮并压透：比如背景hsl(0, 0%, 12%)，阴影用hsla(0, 0%, 85%, 0.06) - 多层叠加比单层更自然：
box-shadow: 0 1px 3px rgba(255,255,255,0.04), 0 2px 8px rgba(255,255,255,0.06)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
