CSS阴影还原失败的根源在于DPR放大、层叠上下文裁剪和背景色干扰三处错位：高DPR使blur-radius翻倍导致发灰变糊；overflow:hidden在padding box内裁剪，阴影被物理截断；不同背景色下相同rgba透明度呈现浮起感差异达30%。
不是CSS框架“不支持”阴影，而是设计稿里的阴影参数和前端渲染模型存在三处硬性错位：DPR放大、层叠上下文裁剪、背景色干扰。直接套用Figma导出的box-shadow值，90%会发灰、变浓或被截断。
box-shadow的blur-radius在高DPR屏上被自动放大
设计稿标注的box-shadow: 0 2px 8px rgba(0,0,0,0.1)，在MacBook Pro（DPR=2）上实际渲染为0 4px 16px——模糊区域翻倍，透明度感知增强，阴影立刻“糊开”。这不是bug，是CSS像素模型的必然表现。
- 别依赖媒体查询动态改值，从源头控制参数：把
blur-radius设为≤4px（推荐2px或4px），避免放大后失控 -
spread-radius尽量为0；若必须用，选偶数（如-2px），避开DPR=2时1.5px→3px这类舍入误差 - 透明度要降档：DPR=2下
rgba(0,0,0,0.06)视觉浓度≈DPR=1下的rgba(0,0,0,0.1)，直接调低0.02–0.04
父容器overflow:hidden裁剪阴影但开发者没意识到
阴影绘制在元素border box外侧，而overflow: hidden裁剪的是padding box内边缘。很多卡片组件包裹在overflow: hidden的Grid/Flex容器里，阴影直接被物理切掉——不是没画，是画了但被裁了。
- 加
padding能救，但必须≥阴影最大外延：取blur-radius + abs(v-offset)和spread-radius三者最大值，再加2–4px余量（例如box-shadow: 0 4px 12px，至少加padding: 16px） - Grid容器里慎用
overflow: hidden清浮动，它比Flex更易隐式触发裁剪边界 - 用DevTools逐层关闭
overflow属性，比盲目加padding更快定位哪一层在裁剪
卡片背景色与阴影透明度形成视觉欺骗
同一组box-shadow值，在background: #fff和background: #f9fafb上呈现的“浮起感”差异极大。UI标注通常只给一个值，但前端必须按背景色微调透明度，否则还原度直接掉30%。
立即学习“前端免费学习笔记（深入）”；
- 白底卡片用
rgba(0,0,0,0.06–0.08)，浅灰底（#f9fafb）用rgba(0,0,0,0.1–0.12) - 禁用
hsla()或命名色（如grey），统一用rgba()确保透明度可控 - 避免
backdrop-filter和box-shadow混用，Safari中两者叠加极易渲染不一致
真正卡住还原度的，从来不是“怎么写阴影”，而是没意识到DPR、裁剪边界、背景色这三者会实时改写你写的每一个像素值。调阴影前，先确认设备DPR、父容器overflow状态、卡片背景色——这三个变量不动，其他参数调再久也没用。
