color-mix()不能直接生成阴影色，因其仅支持色彩空间线性混合，无法按明度语义化偏移；lab()/lch()可精准调控l值实现稳定变暗，但需注意浏览器兼容性及fallback预计算。
为什么 color-mix() 不能直接生成阴影色？
很多人看到 color-mix() 就想拿来“自动算出阴影色”，比如把主色变暗一点作为 box-shadow。但现实是：CSS 原生不提供“基于颜色自动生成阴影值”的函数，color-mix() 本身也不支持按明度（L）或亮度（luminance）等语义化方式偏移——它只能按色彩空间线性混合，比如 color-mix(in srgb, #007bff 70%, black 30%)，结果可能发灰、失饱和，且不同色相下“变暗”效果不一致。
lab() 或 lch() 是目前最靠谱的明度控制方案
真正能稳定控制“变暗程度”的，是 CSS Color Level 4 的 lab() 和 lch()。它们把亮度（L）单独拎出来，改 L 值就能精准压暗/提亮，不干扰色相和饱和度。
- 用
lch()更直观：比如主色是lch(55% 60 250)，阴影可设为lch(35% 60 250)（L 从 55→35），色相（H）和彩度（C）不变，视觉上就是“同一颜色更暗的版本” -
lab()同理，但 L 范围是 0–100，a/b 值范围大且难直觉调整，lch()的 H 是角度（0–360），更适合设计师思维 - 注意浏览器兼容性：Chrome 111+、Safari 16.4+、Firefox 117+ 支持；旧版需 fallback 到
rgba()或预计算值
实际写法：用自定义属性 + lch() 实现“一键换主题阴影”
别在每个 box-shadow 里硬写 lch() 值。把主色抽成变量，阴影用 calc 动态算 L 值：
:root {
--primary: lch(60% 70 240);
--shadow-l: clamp(20, calc(60 - 25), 55); /* 主色 L=60，阴影 L=35 */
}
.card {
background: var(--primary);
box-shadow: 0 2px 8px hsl(240 70% var(--shadow-l));
/* 注意：hsl() 这里只是 fallback，真用时应写 lch(var(--shadow-l) 70 240) */
}
关键点：
-
lch()中的 L 值不能超 0–100，建议用clamp()保底，避免负值或溢出 - 不要混用色彩空间：比如拿
rgb()主色去套lch()阴影——必须统一源头，最好全用lch()定义主色 - 阴影不是越暗越好：L 值降 15–25 点通常足够，降太多会失去层次感，尤其在深色模式下
fallback 方案必须手动预计算，别指望 JS runtime 替你转
CSS 里没法用 JS 把 lch() 实时转成 rgb() fallback。如果要兼容老浏览器，得提前算好：
- 用在线工具（如 https://bottosson.github.io/misc/colorpicker/）输入
lch(35% 70 240)，复制生成的#1a3d8c - 写成
box-shadow: 0 2px 8px rgba(26, 61, 140, 0.3)，再用@supports (color: lch(0 0 0))覆盖为lch()版本 - 千万别用 JS 在页面加载时遍历所有元素去 setAttribute——性能差、FOUC 明显、且无法响应 CSS 变量变化
真正麻烦的不是怎么写，而是确认设计系统里每种主色对应的阴影 L 偏移是否视觉一致——这得人眼调，算法给不了答案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
