color-mix()不能用于阴影深浅控制，因其在sRGB中线性插值导致明度下降不一致、色相偏移；应改用lch()配合自定义属性与clamp()精确调控明度L值。
不能用 color-mix() 在运行时“一键”调整阴影深浅，它混出来的不是变暗，是发灰；真正可控的方案是用 lch() + 自定义属性 + clamp() 计算明度偏移。
为什么 color-mix() 不能当阴影深浅控制器用
很多人试过 color-mix(in srgb, var(--primary) 70%, black 30%)，结果发现：蓝色阴影变浊、红色偏棕、绿色失饱和——这不是“变深”，是色彩空间错乱。因为 color-mix() 在 srgb 里做线性插值，不理解人眼对“暗”的感知（即明度 L）。不同色相下，混入相同比例黑色，L 下降量差异极大，视觉深度完全不一致。
常见错误现象：
-
box-shadow换主题色后，同一套color-mix()规则在红/蓝/黄按钮上阴影浓淡明显不一 - 深色模式下，原
color-mix()阴影在暗背景上反而发亮、失去层次 - 卡片 hover 时阴影“跳变”，不是平滑变深，而是色相偏移导致心理预期错乱
用 lch() 精控明度才是正解
lch() 把颜色拆成 L（明度 0–100）、C（彩度）、H（色相），改 L 就是真·变暗，不扰动颜色本体。主色是 lch(60% 70 240)，阴影写 lch(35% 70 240)，只降 25 点明度，色相和彩度全保留，视觉就是“同一个颜色沉下去一点”。
实操要点：
- 主色必须用
lch()或lab()定义；别拿rgb()主色去套lch()阴影——色彩空间不匹配，结果不可控 -
L值建议降 15–25；降太多（如L: 10）会糊成一片，尤其在深色 UI 中丢失层次 - 必须用
clamp(0, calc(), 100)包一层，防止计算出负L或超 100 导致整条声明失效
怎么让 lch() 阴影真正“可运行时调整”
CSS 里没法用 JS 实时把 lch() 转成 rgb()，所以“运行时调整”指的不是 JS 动态计算颜色值，而是通过自定义属性 + calc() 在 CSS 内部完成明度偏移逻辑，并支持主题切换。
推荐写法：
:root {
--primary-lch: lch(60% 70 240);
--shadow-l-offset: -25;
--shadow-l: clamp(20, calc(60 + var(--shadow-l-offset)), 55);
}
.card {
background: var(--primary-lch);
box-shadow: 0 2px 8px lch(var(--shadow-l) 70 240);
}
换主题色时，只需改 --primary-lch 和对应 --shadow-l-offset，所有阴影自动同步。注意：box-shadow 里不能混搭 hsl() 和 lch()；fallback 必须提前算好（如 rgba(0, 123, 255, 0.2)），不能靠 JS 补。
兼容性兜底不是可选，是必填项
lch() 支持：Chrome 111+、Safari 16.4+、Firefox 117+；旧版浏览器会直接忽略整条 box-shadow 声明。所以必须写 fallback：
.card {
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2); /* fallback */
box-shadow: 0 2px 8px lch(var(--shadow-l) 70 240);
}
浏览器按顺序解析，不支持 lch() 的就用前面那条。别指望 @supports (color: lch(0% 0 0)) 来包裹——它在旧引擎里本身就不生效，fallback 必须无条件存在。
最易被忽略的一点：明度偏移量 --shadow-l-offset 必须和主色 L 基准值解耦；否则换深色主题（比如 lch(30% 40 240)）时，固定减 25 会让阴影 L 掉到 5，直接糊底。得根据主题重新设偏移，而不是复用同一套数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
