直接用背景色的深色变体做阴影更可控可靠，关键是以hsl()调低明度并配合适当透明度与模糊值，而非依赖currentColor或硬套颜色。
直接用背景色的深色变体做阴影，比“猜颜色”或硬套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);
深色背景上文字阴影被盖住？别硬调text-shadow
text-shadow默认绘制在文字下方、背景上方，但一旦background-color不透明，阴影就被遮死。这不是颜色问题，是渲染层级问题。
- 最稳解法：用伪元素分层，主元素负责背景，
::before负责带text-shadow的文字，position: absolute叠准 - 快捷解法（仅限纯色/线性渐变背景）：
background-clip: text;+-webkit-text-fill-color: transparent;，让背景“长进文字里”，阴影自然透出 - 慎用
filter: drop-shadow()：它作用于整个盒模型，会把边框、内边距全包进去，容易糊掉细节 - 绝对不要给
text-shadow加z-index——它根本不响应这个属性
真正难的不是算颜色，而是判断“这个阴影该有多淡”。同一组hsla()值，在高DPI屏上可能太轻，在低亮度设备上又看不清。上线前务必在真实设备+不同亮度下快速过一遍——颜色方案再完美，看不见就等于没写。
