color-mix() 目前无法直接用于生产环境，因浏览器支持有限且语法严格：chrome 111+ 需开启实验标志，firefox 完全不支持，safari 16.4+ 仅部分支持；必须使用 in 关键字和百分比，颜色空间名大小写敏感，错误即静默失效；推荐用 in srgb 保兼容，in lch 保感知但需 @supports 包裹并配 fallback；fallback 依赖 css 层叠而非 @supports 检测；不支持 css 变量或 currentcolor，动态更新需 js 手动设置。
color-mix() 目前不能直接用于生产环境，绝大多数用户根本看不到混合效果。 它在 Chrome 111+ 需手动开启实验标志，Firefox 完全不支持，Safari 16.4+ 仅部分支持 —— 写了等于白写，除非你明确只做本地实验或渐进增强。
color-mix() 的语法必须带 in 和百分比，漏一个就静默失效
浏览器解析 color-mix() 时极其严格：缺 in、空格错位、百分比缺失、颜色空间名大小写错误（比如写成 sRGB），整条声明都会被丢弃，控制台无报错，DevTools 里显示为“无效值”。
- ❌ 错误：
color-mix(srgb, red, blue)（漏in） - ❌ 错误：
color-mix(in rgb, red 50%, blue 50%)（rgb不是合法空间名） - ❌ 错误：
color-mix(in srgb, red, blue)（两个颜色都没跟百分比） - ✅ 正确：
color-mix(in srgb, red 60%, blue 40%) - ✅ 正确（等效）：
color-mix(in srgb, red 3, blue 2)（浏览器自动归一化为 60%/40%）
选 in srgb 还是 in lch？取决于你要保真还是保感知
in srgb 是唯一跨浏览器勉强可用的颜色空间，结果可预测、可复现；in lch 混合更自然（比如红→黄过渡不发灰），但 Safari 16.4+ 才支持，Firefox 仍不认。
- 做主题色推导、按钮悬停加深、设计稿像素级还原 → 用
in srgb - 做高保真渐变锚点、品牌色阶、无障碍对比度微调 → 用
in lch+@supports包裹，并确保有 fallback - 别碰
in oklch或in oklab：Chrome/Edge 支持，但 Safari 和 Firefox 当前均不支持
fallback 必须靠 CSS 层叠，@supports 检测不可靠
@supports (background: color-mix(in srgb, red, blue)) 只能检测语法是否被识别，无法判断权重是否写对、颜色空间是否被当前浏览器实现。真正可靠的降级，是靠属性层叠本身：
button {
background-color: #007bff; /* 静态 fallback，始终生效 */
background-color: color-mix(in srgb, #007bff 70%, #ffffff 30%);
}
- 关键语义色（如错误提示红、成功绿）绝不能只依赖
color-mix() - 不要把
color-mix()和mix-blend-mode混用 —— 前者算出一个确定 RGB 值，后者是图层像素叠加，原理完全不同 -
color-mix()不支持var(--primary)或currentcolor，所有颜色必须是字面量或已计算好的自定义属性值
最常被忽略的一点：它不解决「动态响应」问题。你想让混合色随 JS 改变某个变量？必须用 style.setProperty() 手动更新内联样式，CSS 自己不会监听变量变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
