color-mix() 不支持 css 变量，必须用字面量颜色、显式色彩空间（如 in oklch）和精确权重；漏写 in、权重错误或浏览器不支持均导致静默失效，需 @supports 检测并提供 fallback。
color-mix() 不能直接微调 CSS 变量定义的色调，它只接受字面量颜色 + 显式色彩空间 + 权重，三者缺一不可。
为什么写了 color-mix(in srgb, var(--primary), white) 却没效果？
这是最常踩的坑：浏览器根本不会解析该声明，静默丢弃整条规则，连控制台警告都没有。原因很硬性：
-
var(--primary)不是可解析的颜色字面量，color-mix()完全不支持任何变量、currentColor或transparent - 漏写
in关键字（如写成color-mix(srgb, ...)）→ 无效语法 - 权重缺失或格式错误：比如
white 70（缺%）、white（无权重）、white 70%, black 20%（总和 ≠100%）→ 全部被忽略 - 在 Firefox 或旧 Safari 中使用 → 整条声明被跳过，回退到上一个有效颜色（可能完全不是你预期的）
如何用 color-mix() 实现“视觉上可控”的色调微调？
关键不是“动态调整”，而是**提前把基础色转为感知均匀空间，再做线性插值**。sRGB 插值容易发灰或偏色，必须换空间：
- 优先用
in oklch：明度L更贴合人眼，混白/混黑后灰阶过渡平滑，不塌陷 - 基础色先转成
oklch(L C h)（可用 Chrome DevTools 拾色器直接读取） - 浅色微调（tint）：提高基础色的
L，再与oklch(100% 0 0)混合，例如：color-mix(in oklch, oklch(62% 0.18 245) 75%, oklch(100% 0 0) 25%) - 深色微调（shade）：降低基础色的
L，再与oklch(0% 0 0)混合，例如：color-mix(in oklch, oklch(62% 0.18 245) 80%, oklch(0% 0 0) 20%) - 别用
white或black字面量——它们在oklch下不等价于中性灰，必须写全oklch(100% 0 0)和oklch(0% 0 0)
@supports + fallback 是必须项，不是可选项
目前仅 Chrome/Edge 111+ 和 Safari 16.4+ 原生支持，Firefox 仍默认禁用且无启用计划。纯靠 color-mix() 会直接导致样式断裂：
- 必须用
@supports (color: color-mix(in oklch, red, blue))包裹所有依赖声明 - fallback 颜色要写在
@supports外层，确保降级后仍可用：color: #3a5fa8; /* fallback */ - 不要嵌套在复合属性里：
background: color-mix(...) no-repeat;会整体失效；拆成background-color单独声明 - 别指望自动退化——CSS 没有
lighten()或darken()函数，color-mix()失效时就是彻底没颜色
真正麻烦的点不在语法，而在于：你得先把每个主色手动转成 oklch() 格式，再算好每档微调对应的 L 值和混合比例。没有 JS 或构建工具介入，所谓“动态微调”只是静态预设。浏览器不认变量，也不认计算过程，只认最终那个固化下来的字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
