color-mix() 是编译期静态函数，不响应变量、状态或媒体查询变化；浏览器解析时即固化为固定色值，需配合 fallback、@supports 检测及预计算方案使用。
color-mix() 不能动态混合颜色——它只在 CSS 计算阶段生成一个静态色值，不响应状态、变量或媒体查询变化。
color-mix() 的“动态”是假象，本质是预计算
开发者常误以为 hover 或 :root 变量能触发 color-mix() 实时重算，但事实是：浏览器解析时就固化结果。写 color-mix(in srgb, #007bff 70%, #ffffff 30%)，最终等价于直接写 #81aef5。它不支持 var(--primary)、currentcolor，也不响应 :hover 或 @media 内部重定义。
- 常见错误现象：在
:root里改了--primary，但color-mix(in srgb, var(--primary), white)完全不生效 → 因为语法非法，整条声明被静默丢弃 - 真正可行的“多态”方案，是提前算好几套固定组合，再用
@supports+ 层叠 fallback 切换，例如：button {<br> background-color: #007bff;<br> background-color: color-mix(in srgb, #007bff 70%, #ffffff 30%);<br>}<br>@media (prefers-color-scheme: dark) {<br> button {<br> background-color: #1e40af;<br> background-color: color-mix(in srgb, #1e40af 70%, #000000 30%);<br> }<br>} - 权重可写为
red 2, blue 1（自动归一化），但不能省略单位或空格错位；in srgb必须显式写出，漏掉即整个声明失效
哪些场景下 color-mix() 看起来像“动态”，实则靠外部驱动
所谓“动态”，实际依赖 JS 或构建时介入，CSS 自身无运行时能力：
- JS 修改
style.setProperty('--mixed', 'color-mix(...)')没用 —— 浏览器不解析字符串里的函数，只会当普通文本塞进去 - 真正有效的是 JS 计算出结果色值（如调用
getComputedStyle(el).backgroundColor拿到已解析的 RGB），再写回style.backgroundColor - 构建工具（如 PostCSS 插件）可在打包时展开
color-mix()成十六进制，生成多套主题 CSS 文件，由 HTMLclass切换 - 若需悬停渐变，必须用
transition驱动color或background-color在两个预计算好的color-mix()结果间插值，例如：color: hsl(210 70% 60%); transition: color 0.3s;→&:hover { color: hsl(210 70% 90%); }
浏览器支持和 fallback 不是可选项，是硬性前提
截至 2026 年 10 月，color-mix() 仅在 Chrome/Edge 111+ 和 Safari 16.4+ 中可用，Firefox 仍默认禁用且无启用计划。写它必须带降级：
- fallback 必须用层叠顺序实现：
background-color: #f8f9ff; background-color: color-mix(in srgb, #eef2ff 85%, #ffffff 15%);，而非依赖var(--x, #f8f9ff) -
@supports (color: color-mix(in srgb, red, blue))只检测语法识别，不保证权重或空间名正确；DevTools 里显示“invalid value”大概率是in lch写成in LCH或百分比缺 % - 表格斑马纹等需要多处复用的场景，必须预定义
--row-bg-dark变量，并确保 fallback 值是人工从 DevTools 拾色器里复制的真实输出色，不能留空或写transparent - 混合白/黑必须用
in oklch或in lch，in srgb会报Invalid color space；oklch(100% 0 0)是纯白，oklch(0% 0 0)是纯黑，二者混合才得中性灰
最容易被忽略的是：你写的每一个 color-mix() 都是编译期常量，不是运行时函数。它不读取当前上下文，不感知用户操作，也不参与 CSS 动画帧计算。想让它“动”，就得先把它拆成多个静态值，再靠其他机制切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
