color-mix()在旧版浏览器中被静默丢弃而非报错，主因是Firefox默认禁用、Safari 16.3及更早不支持、Chrome/Edge 110以下不识别；必须前置静态fallback（如color: #6b7280;），再覆盖color-mix()声明，且@supports检测需用完整调用形式如(background: color-mix(in srgb, black, white))。
color-mix() 在旧版浏览器中不是“报错”，而是被整个 CSS 声明静默丢弃——它根本不会触发警告或控制台日志，你看到的只是前一个有效颜色值（比如继承色、用户代理默认值，甚至透明），文字可能直接消失。
为什么写了 color-mix() 却没效果？
失效主因不是语法错误，而是环境不认：
-
color-mix()在 Firefox 默认禁用（需手动开启layout.css.color-mix.enabled），截至 2026 年 10 月仍无默认支持 - Safari 16.3 及更早版本完全忽略该函数；16.4+ 仅部分设备支持，且对
in lch或权重省略极其敏感 - Chrome/Edge 110 及更早版本不识别函数名，整条声明跳过
- 漏写
in srgb、用var(--primary)、写成red 60（缺 %）或color-mix(srgb, ...)（漏in）——任一条件不满足，声明即被丢弃
如何写出真正生效的 fallback 层叠结构？
靠 CSS 属性层叠本身降级，不是靠 @supports 包裹逻辑——后者只检测语法是否被识别，无法兜底语法正确但浏览器未实现的情况：
- 必须把静态颜色写在前面：
color: #6b7280;，再覆盖color: color-mix(in srgb, #3b82f6 60%, #9ca3af 40%); - 不能拆到不同 class 或媒体查询里，必须同一属性连续声明，依赖浏览器自然层叠规则
- fallback 只能用
#rrggbb、rgb()、hsl()或命名色；oklch()或color-mix()的输出值不能当 fallback - 复合属性如
background里直接嵌套color-mix()会整体失效，应拆成--mixed-bg: color-mix(...); background-color: var(--mixed-bg);
怎样安全检测并启用 color-mix()？
@supports 不是可选动作，而是防止不支持时样式错乱的必要包裹，但写法必须精确：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
@supports (color-mix: )或@supports (color: color-mix())→ 所有浏览器当语法错误丢弃整块 - 正确写法：
@supports (background: color-mix(in srgb, black, white))（完整调用 + 合法参数） - 更稳的替代检测：
@supports (color: oklch(0% 0 0))，因为基础色函数支持梯度比color-mix()更平缓 - IE11 和老旧 WebView 根本不识别
@supports，所以外层裸写的 fallback 是唯一真实兜底手段
真正容易被忽略的是：你写的每一个 color-mix() 都只是在 CSS 计算阶段固化一个 RGB 值，和手写 #6b7280 没区别；它不响应状态、不校验对比度、不参与 prefers-color-scheme 切换——想稳，就得提前算好、明确 fallback、并在真机上用 DevTools 实测渲染结果。
