color-mix() 目前仅chrome 111+和safari 16.4+支持（后者需手动开启实验功能），firefox完全不支持；默认使用oklab色彩空间，须显式声明in srgb才能获得传统rgb混合效果，且不支持css变量、透明色和currentcolor。
color-mix() 函数目前（截至 2024 年中）**尚未在所有主流浏览器中稳定支持**，Chrome 111+ 和 Safari 16.4+ 已启用，但 Firefox 仍完全不支持，且需注意默认使用 oklab 色彩空间而非直觉的 sRGB。
哪些浏览器能用 color-mix()？
实际可用性取决于目标环境：
- Chrome 111+：默认启用，无需 flag
- Safari 16.4+：需开启「开发者 → 实验性功能 → CSS Color Level 5」
- Firefox：无支持计划，
color-mix()会直接被忽略（不报错，也不回退） - PostCSS 或构建时处理：可借助
postcss-color-mix插件提前降级为linear-gradient或固定色值
color-mix() 的语法和色彩空间选择很关键
它不是简单加权平均，不同色彩空间混合结果差异极大。默认 oklab 更符合人眼感知，但如果你想要传统 RGB 插值效果，必须显式指定：
background-color: color-mix(in srgb, red 70%, blue 30%);
而下面这句会更“柔和”，因为 oklab 在亮度、色相上更均匀：
background-color: color-mix(in oklab, red 70%, blue 30%);
常见错误是省略 in <space></space>，此时浏览器按规范用 oklab，但设计师给的参考色常基于 sRGB，导致视觉偏差。
不能混透明色，也不能混自定义属性（CSS 变量）
color-mix() 的参数必须是可解析的确定颜色值，以下写法均无效：
-
color-mix(in srgb, var(--primary), #fff)—— CSS 变量不会被展开 -
color-mix(in srgb, rgba(255,0,0,0.5), blue)—— 半透明色参与混合时 alpha 被静默丢弃，结果等同于red -
color-mix(in srgb, currentColor, #000)——currentColor是动态值，不被允许
若需变量参与，得靠 JS 计算后注入，或用 @property（仅 Chrome 支持）配合 color-scheme 做有限降级。
替代方案比硬扛兼容性更实用
真要支持 Firefox 或旧版 Chrome，别赌 color-mix() 的渐进增强——它无法 fallback。稳妥做法：
- 用
linear-gradient(90deg, #f00 50%, #00f 50%)模拟 50/50 混合（仅适用于背景） - 服务端或构建时用 PostCSS 提前计算出近似色值，输出降级后的
background-color: #7f007f - 对关键 UI 元素，手动取中间色（如 red→blue 的 50% 是
#7f007f），比依赖运行时混合更可控
真正难的不是写对语法，而是意识到：这个函数在生产环境里，目前还不是一个“开箱即用”的工具，而是一个需要配套检测、降级、设计校准的链路节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
