color-mix()静默失效主因是语法或环境不满足硬条件：必须用具体颜色字面量、显式色彩空间（如in srgb）、合法权重格式（如red 60%, blue 40%），漏写in、权重缺失%、含CSS变量或alpha值均导致整条声明被忽略。
color-mix() 只能混合两个已知的不透明纯色，输出一个固定 RGB 值；它不读取背景、不处理透明度、不支持变量，写了却没效果，大概率是语法或环境问题。
为什么写了color-mix()却没变化？
常见静默失效原因不是浏览器报错，而是整条声明被跳过：
- 漏写
in srgb（或其它合法色彩空间）→ 浏览器直接忽略整条声明 - 权重缺
%：写成red 60或red 60%, blue（后者没权重）→ 静默失败 - 用了 CSS 变量：
color-mix(in srgb, var(--primary), blue)→ 不解析，报Invalid property value - 传入带 alpha 的颜色：
rgba(255 0 0 / 0.8)或#ff000080→ alpha 被丢弃，只取 RGB 部分
怎么写才真正生效？
必须同时满足三个硬条件：具体颜色字面量 + 显式色彩空间 + 合法权重格式。示例：
button {
background-color: #007bff; /* fallback，永远生效 */
background-color: color-mix(in srgb, #007bff 70%, #ffffff 30%);
}- 优先用
in srgb：兼容性最稳，Chrome 111+、Edge 111+、Safari 16.4+ 均支持 - 权重可写数字（如
red 2, blue 1），浏览器自动归一化为 66.6%/33.3% - 别用
currentColor或transparent：前者未解析，后者不是颜色值，都会导致失效
想让混合结果更自然，该换什么色彩空间？
in lch 或 in oklch 比 in srgb 更符合人眼感知，但支持度受限：
立即学习“前端免费学习笔记（深入）”；
-
in lch：Safari 16.4+、Chrome 119+ 支持；Firefox 不支持 -
in oklch：Chrome/Edge 支持，Safari 和 Firefox 当前不认，慎用 - 不要指望
in srgb混出“视觉居中”的色——比如color-mix(in srgb, red 50%, blue 50%)得到的是暗紫#7f007f，不是品红；换in lch才可能保亮度和饱和度
哪些事color-mix()根本做不到？
它不是图层混合工具，也不是动态计算引擎：
- 不能替代
mix-blend-mode：后者作用于渲染后像素，前者只产出一个静态颜色值 - 不能响应深色模式自动切换：写
color-mix(in srgb, var(--accent) 70%, white 30%)，在深色背景下依然混白色，结果发灰 - 无法动画：
transition对color-mix()无效，它解析后就是固定色值，比如rgb(129 174 245) - 不支持透明度计算：想“把黑变半透”，直接用
rgb(0 0 0 / 0.5)，别绕道color-mix()
真正难的不是写出那行函数，而是确保它在所有目标环境中都解析成功、不回退、不误伤关键语义色——这意味着你必须亲手验证每一种组合在 Chrome、Safari、Firefox 中的表现，而不是依赖文档里的“支持”二字。
