直接用背景色的深色变体做阴影更可控可靠，关键是以hsl()调低明度并配合适当透明度与模糊值；currentColor不等于背景色，因其只继承元素自身的color值，与background-color无关，且无法反映渐变、图片或半透背景。
直接用背景色的深色变体做阴影更可控可靠，关键是以hsl()调低明度并配合适当透明度与模糊值，而非依赖currentColor或硬套颜色。
为什么currentColor在box-shadow里不等于背景色
currentColor只继承元素自身的color值，和background-color完全无关。哪怕你把color设成transparent，阴影也不会“读取”背景——它只会渲染成透明或回退为黑色（Safari旧版尤其明显）。所以别指望它自动适配背景。
常见错误现象：box-shadow: 0 2px 4px currentColor;写完发现阴影是黑的，而背景是蓝色。
- 真正起作用的是：显式设置
color值，并让它与背景色同源（比如都来自--primary变量） - 如果背景是渐变、图片或
rgba()半透色，currentColor根本无法反映这种复杂性
如何从背景色生成合适的深色阴影
目标不是“复制背景”，而是模拟光照下自然产生的暗部。推荐用hsl()或hsla()手动调低lightness，比用darken()函数或在线工具更精准、更可维护。
立即学习“前端免费学习笔记（深入）”；
- 若背景是
background-color: #54B3A1;，先转成hsl(168, 52%, 51%) - 阴影用
hsl(168, 52%, 38%)（lightness降约13%），再加alpha = 0.2→hsla(168, 52%, 38%, 0.2) - 避免直接
rgb()减数值（如#3a9a87），容易偏色；hsl()保色相，只控明度 - 深色背景（如
#1e1e1e）反向操作：轻微提亮lightness，改用浅灰+低透明度，如hsla(0, 0%, 85%, 0.1)
用rgba()配合模糊参数让阴影真正“融进去”
只换颜色不够，透明度和模糊必须同步调整。生硬的阴影往往源于高对比+小模糊+整数透明度。
- 浅色背景推荐：
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);（注意是0.08，不是0.1） - 深色背景推荐：
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.06);（白+极低透明度） - 模糊值要匹配偏移：
3px垂直偏移配12px模糊，比2px/4px组合更柔和 - 多层叠加更自然：
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 3px 12px rgba(0,0,0,0.08);
最易被忽略的是：blur-radius和spread-radius在高DPI屏下会被设备像素比（DPR）放大，导致阴影发灰、边缘断裂。哪怕参数写得再准，没控制好逻辑像素单位，视觉效果也会崩——这比颜色本身更难调试。
