color-mix() 无法真正动态混合主题色，仅支持固定字面量颜色、显式色彩空间和权重，不接受css变量、currentcolor或alpha通道，且浏览器兼容性差（firefox默认禁用，safari支持有限，chrome/edge 111+较稳）。
color-mix() 不能真正“动态”混合两种主题色——它不接受 CSS 变量、不响应状态变化、也不支持 currentcolor，所谓“动态”仅指在 CSS 计算阶段按固定字面量+固定权重生成一个静态颜色值。想靠它实现主题色实时联动，会直接失败。
为什么写了 color-mix() 却没效果？
最常见原因是浏览器根本不解析该函数，而非语法写错：
-
color-mix()在 Firefox 默认禁用（需手动开启layout.css.color-mix.enabled），截至 2026 年 10 月仍无计划默认启用 - Safari 16.4+ 仅部分设备支持，iOS 上表现不稳定；Chrome/Edge 111+ 是目前唯一较稳环境
- 写了
color-mix(in srgb, var(--primary), var(--secondary))？静默失败——变量不被允许，必须是#2563eb或rebeccapurple这类字面量 - 漏了
in srgb（或其它合法空间名）？整条声明被丢弃，DevTools 显示 “Invalid property value” 或干脆不出现
color-mix() 的合法参数怎么写？
三要素缺一不可：显式色彩空间 + 具体颜色字面量 + 显式权重。权重格式比想象中严格：
- ✅ 正确：
color-mix(in srgb, #2563eb 70%, #ef4444 30%) - ✅ 等效（自动归一化）：
color-mix(in srgb, #2563eb 7, #ef4444 3) - ❌ 错误：
color-mix(in srgb, #2563eb, #ef4444)（缺权重） - ❌ 错误：
color-mix(in srgb, #2563eb 70, #ef4444 30)（缺%单位） - ❌ 错误：
color-mix(in rgb, #2563eb 70%, #ef4444 30%)（rgb不是合法空间名）
注意：in lch 比 in srgb 更符合人眼感知，但 Safari 16.4+ 才支持，Firefox 完全不认；in oklch 则 Chrome/Edge 支持、Safari/Firefox 当前均不支持。
怎么让主题色“看起来能动”？fallback 和 @supports 必须双保险
纯 CSS 下无法真正动态，但可通过预设 + 层叠 + 媒体查询模拟有限切换：
- 先写 fallback：
color: #2563eb;（始终生效） - 再覆盖：
color: color-mix(in srgb, #2563eb 80%, #ffffff 20%);（仅支持环境生效） - 用
@supports (color: color-mix(in srgb, red, blue))包裹整组逻辑，避免不支持时样式错乱 - 深色模式切换比例？只能硬编码：
@media (prefers-color-scheme: dark) { :root { --mix-ratio: 60%; } }，再配合calc()拼进属性值（但仍需提前转为字面量）
别把 color-mix() 和 mix-blend-mode 混用：前者输出一个确定 RGB 值，后者是图层像素叠加，原理完全不同。
Alpha 通道和透明度根本不能混进去
color-mix() 完全忽略 alpha——传入 rgba(37, 99, 235, 0.8) 或 hsla(210, 70%, 60%, 0.8) 会导致整个声明无效。如果需要透明参与混合：
- 预烘焙：用公式
result = fg × α + bg × (1 − α)离线算出不透明结果色，再喂给color-mix() - 换方案：用
background-blend-mode或mix-blend-mode实时合成，它们原生支持 rgba/hsla - 别指望
transition对color-mix()起作用——它输出的是静态值，不是可插值的函数
最容易被忽略的点：你写的每一个 color-mix() 都必须是「已知颜色 + 显式权重 + 明确色彩空间」三者齐全，少一个，就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
