color-mix() 在当前仅 chrome/edge 111+ 和 safari 16.4+ 稳定支持，firefox 需手动启用；语法或环境不满足时浏览器静默忽略整条声明，不报错、不警告、不降级。
color-mix() 不是“写上就能用”的函数，它在当前（2026 年 8 月）仅 Chrome/Edge 111+ 和 Safari 16.4+ 稳定支持，Firefox 默认仍需手动开启 layout.css.color-mix.enabled；且一旦语法或环境不满足，浏览器会静默忽略整条声明，**不会报错、不发警告、不降级**——你看到颜色没变，大概率就是它根本没生效。
为什么写了 color-mix() 却完全没效果？
不是代码写错了，是浏览器压根没解析这个函数。典型静默失效场景包括：
-
Invalid property value控制台错误 → 浏览器不支持或色彩空间非法 - 颜色回退到前一个有效值（比如继承的
currentColor或父级color）→ 实际是整条声明被跳过 - 漏写
in srgb（或其它合法空间）→ 声明被彻底忽略，不是警告 - 用了
var(--primary)或currentColor→ 直接报Invalid property value，必须是字面量，如#2563eb、hsl(210 70% 60%)、rebeccapurple - 权重格式错误：写成
red 60（缺%）、blue（无权重）、或red 60%, blue 30%（总和≠100%）→ 整个函数被丢弃
color-mix() 的正确写法与参数细节
它生成的是一个静态颜色值，不是动画或响应式逻辑。关键点全在语法和空间选择上：
- 色彩空间必须显式写出：
in srgb最稳妥；in lch或in oklch更符合人眼感知，但 Safari 16.4+ 才支持oklch，Chrome 111+ 支持lch - 权重可以是
<percentage></percentage>（如70%）或<number></number>（如0.7），但不能混单位：red 50静默失败，red 50%或red 0.5合法 - 权重总和不必等于 100%：
red 2, blue 1会被自动归一化为red 66.6%, blue 33.3% - 两个颜色都必须完整写出格式：
white或black不能直接用，混合黑白必须写成oklch(100% 0 0)和oklch(0% 0 0) - 别在复合属性里硬塞：
background: color-mix(in srgb, red, blue) no-repeat;会整体失效；应拆成--mixed-bg: color-mix(...); background-color: var(--mixed-bg);
如何让 color-mix() 至少“看起来生效”？
靠 @supports + fallback 双保险，不是为了兼容 IE，而是应对真实用户环境的碎片化：
- 始终把静态色写在前面：
color: #2563eb; color: color-mix(in srgb, #2563eb 70%, #1e40af 30%); - 用
@supports (color: color-mix(in srgb, red, blue))包裹整段逻辑，避免不支持时样式错乱 - 别指望自动 fallback：
color-mix()没有内置降级机制，兜底值必须手动提供，否则降级后整个声明消失 - 如果用于关键视觉（如错误提示红），绝不能只依赖
color-mix()；它只是调色器，不是渲染保障
混合白/黑生成深浅变体时最容易踩的坑
用 in srgb 混合 white 和 black 会报错：Invalid color space in color-mix()。必须用 oklch 或 lch：
-
oklch(100% 0 0)是纯白，oklch(0% 0 0)是纯黑；C 和 h 必须固定为 0，才能保证结果是中性灰 - 基础色不能直接和
white混——先用 DevTools 把#3a5fa8转成oklch(L C h)（例如oklch(55.2% 0.215 252.3)），再线性插值 - 深色变体示例：
color-mix(in oklch, oklch(55.2% 0.215 252.3) 70%, oklch(0% 0 0) 30%) - 百分比总和必须为 100%，且两个颜色都得是完整
oklch()格式，简写无效
color-mix() 从不“动态”——它不读背景、不响应变量、不参与动画，只在 CSS 计算阶段输出一个确定值。你给它什么，它就还你什么；它不猜、不补、不妥协。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
