color-mix() 不支持 css 变量，因需编译期确定颜色值；仅 chrome 111+/safari 16.4+ 支持，firefox 完全不支持；必须用字面量、显式色彩空间（如 in srgb）和明确权重才生效。
color-mix() 不能直接用变量混合主题色，必须写死颜色字面量，且仅 Chrome 111+ / Safari 16.4+ 可用，Firefox 完全不支持。
为什么 var(--primary) 传不进 color-mix()？
浏览器解析 color-mix() 时要求所有颜色参数在 CSS 计算阶段就可确定——var(--primary) 是运行时动态值，不满足条件。以下写法全部无效：
-
color-mix(in srgb, var(--primary), #fff)→ 静默失败，整条声明被丢弃 -
color-mix(in srgb, currentColor, blue)→currentColor同样被禁止 -
color-mix(in srgb, rgba(255,0,0,0.5), blue)→ alpha 被静默忽略，等效于red
你看到“没效果”，大概率不是代码错，而是浏览器根本没认这个函数。
怎么写出能生效的混合语句？
三要素缺一不可：显式色彩空间 + 具体颜色字面量 + 明确权重。常见错误和正确写法对比：
- ❌ 漏
in：color-mix(srgb, #f00 50%, #00f 50%) - ❌ 空间名错：
color-mix(in rgb, #f00 50%, #00f 50%)（rgb不是合法空间） - ❌ 权重缺失：
color-mix(in srgb, #f00, #00f)（虽默认各 50%，但建议显式写） - ✅ 正确：
color-mix(in srgb, #2563eb 70%, #1e40af 30%) - ✅ 等效（自动归一化）：
color-mix(in srgb, #2563eb 7, #1e40af 3)
权重加起来不必严格等于 100%，浏览器会自动换算；但空格、百分号、大小写必须精确，错一位就失效，DevTools 里只显示“Invalid property value”。
想让主题色混合结果更自然，该选哪个色彩空间？
in srgb 最稳妥，兼容性最好，但插值非线性，红→蓝混合容易出灰紫；in lch 或 in oklch 更符合人眼感知，尤其适合调明度（比如混白/黑做 tint/shade），但：
-
in lch：Chrome / Safari 支持，Firefox 不支持 -
in oklch：Chrome / Edge 支持，Safari 16.4+ 仅部分支持，Firefox 完全不认 - 别写
white或black字面量：必须展开为oklch(100% 0 0)和oklch(0% 0 0)
例如浅化主色：color-mix(in oklch, oklch(55.2% 0.215 252.3) 60%, oklch(100% 0 0) 40%) —— 这个 oklch() 值得先用 DevTools 把你的 #3a5fa8 转出来，不能靠猜。
如何安全落地到生产环境？
靠 @supports 包裹 + 层叠 fallback 是唯一可靠路径：
button {
background-color: #2563eb; /* 永远生效的兜底 */
}
@supports (background-color: color-mix(in srgb, red, blue)) {
button {
background-color: color-mix(in srgb, #2563eb 70%, #ffffff 30%);
}
}
注意：@supports 检测的是语法识别能力，不是功能完整性；真正起作用的是属性层叠本身。如果你把关键语义色（如错误红、成功绿）只依赖 color-mix()，那 Firefox 用户看到的就是未定义行为。
真正需要动态响应（比如随深色模式实时调整比例）时，color-mix() 无能为力——它生成的是静态值，不是活的表达式。这时候 JS 注入或构建时预计算才是实际可行的路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
