不能用固定十六进制色值写 --neu-light 和 --neu-dark，因为 neumorphism 的立体感依赖同色系明暗双阴影动态适配背景色，固定值会导致换背景或深色模式时高光发灰、暗影消失、过曝或失真；必须用 hsl() + calc() 基于 --bg 动态计算 hue、saturation 和 lightness 偏移。
为什么不能用固定十六进制色值写 --neu-light 和 --neu-dark
直接写死类似 #d1d9e6 和 #fff 会导致整个新拟物体系崩溃：背景一换，高光就发灰、暗影就消失；深色模式下 #fff 高光直接过曝；所有组件阴影值还得手动重算。Neumorphism 的立体感本质是「同色系明暗双阴影」，两个变量必须随 --bg 动态偏移，而不是独立取色。
hsl() + calc() 是最直接的动态色值方案
Chrome 和现代 Safari 支持在 hsl() 内嵌 calc()，可直接基于背景色推导出匹配的亮/暗阴影色：
body {
--bg: #e0e5ec;
--neu-light: hsl(calc(hue(var(--bg)) - 5), calc(saturation(var(--bg)) * 0.4), calc(lightness(var(--bg)) + 8%));
--neu-dark: hsl(calc(hue(var(--bg)) + 8), calc(saturation(var(--bg)) * 0.6), calc(lightness(var(--bg)) - 12%));
}
-
hue微调保证冷暖倾向一致（+8 / -5 是经验值，非绝对） -
saturation压低避免高光刺眼、暗影浑浊 -
lightness正向偏移做高光、负向偏移做暗影，幅度需匹配背景明度 - 旧版 Safari 不支持
hsl(calc())，此时应改用 JS 注入 fallback 值，或预编译成静态 CSS 变量
RGBA 模式适合快速验证，但无法响应式适配
若项目暂不支持 CSS 变量动态计算，可用 rgba() 手动逼近效果，例如：
.card {
background: #f0f2f5;
box-shadow: 6px 6px 12px rgba(200, 205, 210, 0.5),
-6px -6px 12px rgba(255, 255, 255, 0.8);
}
- 第一个
rgba()是暗影：R/G/B 接近背景但略暗，alpha 控制通透感（0.4–0.6） - 第二个
rgba()是高光：通常用rgba(255, 255, 255, 0.7–0.9)，alpha 过高会失真 - 此写法无法联动主题切换——换背景色就必须重调两组
rgba()值
深色模式下 --bg 改变时，--neu-light/--neu-dark 必须链式更新
深色模式不是简单把 --bg 换成 #2a2d34 就完事。若未用动态色公式，--neu-light 仍会是浅色系的 hsl(...)，导致高光发青、暗影糊成一片。
- 真正有效的做法：只改
--bg，其余变量全靠calc()自动重算 - 验证方式：打开 DevTools 修改
--bg，观察--neu-light是否变成偏蓝灰的浅色，--neu-dark是否变成更深更饱和的墨蓝 - 最容易被忽略的是：
lightness偏移百分比在深色背景下要收窄（比如从 ±12% 改为 ±8%），否则对比过强
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
