color-mix() 不支持动态混合，仅在样式计算时静态插值，等价于手写固定颜色值；必须显式指定 in srgb、使用字面量颜色和百分比权重，否则静默失效或报错。
color-mix() 不支持动态混合——它不接受 CSS 变量、不能响应伪类或媒体查询变化、也无法参与 transition 动画。所谓“动态”仅指浏览器在计算样式时做一次静态插值，结果等价于手写一个 #aabbcc 值。
为什么写了 color-mix() 却没效果？
静默失效远比语法错误更常见，真正卡住你的往往是环境与写法的错配：
-
color-mix(in srgb, var(--primary), #fff)→ 直接报Invalid property value，var()在所有支持color-mix()的浏览器中均被拒绝 - 漏写
in srgb（比如只写color-mix(srgb, red, blue)）→ 整条声明被丢弃，DevTools 显示“invalid value”，控制台无提示 - 用
rgba(255, 0, 0, 0.5)或hsla(0, 100%, 50%, 0.8)→ alpha 通道不被识别，声明静默失败 - 权重缺
%：写成red 60, blue 40或red 60%, blue（后者无权重）→ 浏览器跳过该颜色项，可能只剩单色生效
怎样让 color-mix() 至少“看起来生效”？
靠层叠 fallback + 显式色彩空间 + 字面量组合，三者缺一不可：
- 永远把静态色写在前面：
color: #2563eb; color: color-mix(in srgb, #2563eb 70%, #1e40af 30%); - 别塞进复合属性：
background: color-mix(in srgb, red, blue) no-repeat;会整体失效；必须拆成--mixed-bg: color-mix(in srgb, red, blue); background-color: var(--mixed-bg); -
@supports (color: color-mix(in srgb, red, blue))只能检测函数是否被识别，无法验证权重或色彩空间拼写是否正确，不可靠 - 关键语义色（如
--error、--success）绝不能只依赖color-mix()，它不是渲染保障
color-mix() 能否用于深色模式或悬停过渡？
不能直接响应，但可配合预设逻辑“模拟动态”：
- 深色模式切换需靠媒体查询硬编码比例：
@media (prefers-color-scheme: dark) { :root { --mix-ratio: 60%; } }，再用color-mix(in srgb, #2563eb var(--mix-ratio), black calc(100% - var(--mix-ratio)))—— 注意：这行在 Safari 和 Firefox 仍会失败，因它们不支持变量权重 - 悬停渐变要分两步：先用
color-mix()算出起点和终点色（如--hover-bg: color-mix(in srgb, #2563eb 80%, #fff 20%)），再用transition: background-color 0.2s;驱动已知色值间插值 -
color-mix()输出的是固定 RGB 值，transition对它本身完全不起作用；想平滑过渡，得靠hsl()或oklch()格式参与 CSS 插值
真正容易被忽略的是：你写的每一个 color-mix() 都必须是「已知颜色字面量 + 显式百分比权重 + 小写 in srgb」三者齐全。它不是调色板，也不是运行时函数，而是一个在样式计算阶段就固化下来的值。想真动态？还是得靠 JS 解析、计算、注入变量——CSS 层面，它只负责“算一次，定终身”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
