color-mix()必须配合静态fallback和@supports双保险，fallback须前置且仅用#rrggbb等兼容格式，@supports应检测oklch()而非color-mix()本身，色彩空间与权重缺一不可，否则旧浏览器静默失效。
直接写 color-mix() 而不加回退，旧浏览器里颜色会静默消失或回退到继承值——不是变灰，是彻底“没颜色”。必须用静态色值 + @supports 双保险，缺一不可。
fallback 颜色必须写在 @supports 外部且顺序不能反
浏览器从上往下解析 CSS，如果 fallback 写在 @supports 块后面，部分早期 Chromium（如 Chrome 111 之前）会跳过它；写在前面才真正兜得住。
- ✅ 正确写法：
color: #3a5fa8;→ 换行 →@supports (color: oklch(0% 0 0)) { color: color-mix(in oklch, oklch(55.2% 0.215 252.3) 60%, oklch(100% 0 0) 40%); } - ❌ 错误写法：把
@supports块写在前面，后面再补color: #3a5fa8;—— 这条 fallback 可能被忽略 - fallback 只能用广泛支持的格式：
#rrggbb、rgb()、hsl()或命名色；不能用oklch()或color-mix()的输出作 fallback
@supports 必须检测色彩空间，不能检测 color-mix() 本身
写 @supports (color-mix: ...) 在 Safari 16.4 之前会被当语法错误整块丢弃；正确做法是检测基础色彩空间是否可用——它比混合函数更早落地、更稳定。
- ✅ 推荐检测：
@supports (color: oklch(0% 0 0))或@supports (color: lch(0% 0 0)) - ❌ 避免检测：
@supports (color-mix: oklch(0% 0 0) 50%, red)—— 大部分浏览器根本不认识这个特性查询 - 如果同时要用
oklch()和color-mix()，优先按oklch分组，在内部嵌套color-mix()规则，避免多层嵌套失效
混合空间必须显式声明且前后一致
color-mix() 不写 in srgb 或 in oklch 会直接解析失败，不是警告，是整条声明被跳过；而且两个输入颜色的空间必须和声明空间一致，混用 rgb() 和 oklch() 会导致静默失效。
- ✅ 合法：
color-mix(in oklch, oklch(55.2% 0.215 252.3) 60%, oklch(100% 0 0) 40%) - ❌ 非法：
color-mix(in oklch, #3a5fa8 60%, white 40%)——#3a5fa8是 sRGB，white是命名色，空间不匹配 - 权重总和不必等于 100%，浏览器会自动归一化，但输入颜色必须同属一个空间；写成
red 60, blue 40（缺 %）也会被忽略
别指望它在伪类或动画里动态响应
color-mix() 只生成静态颜色值，比如 color-mix(in srgb, #007bff 30%, #fff 70%) 解析后就是 #81aef5，和手写十六进制完全等价。它不认变量、不响应 :hover、不参与 transition 插值。
- 想实现悬停渐变？得先用
color-mix()算出起点和终点色，再转成hsl()或oklch()格式，让 CSS 插值引擎接管 - 不要在
background这类复合属性里直接嵌套：background: color-mix(...) no-repeat;会整体失效；拆成--mixed-bg: color-mix(); background-color: var(--mixed-bg); - Firefox 默认仍禁用该功能（需手动开启
layout.css.color-mix.enabled），Safari 16.4+ 支持不全，Chrome/Edge 111+ 是目前唯一较稳环境
最容易被忽略的是：你写的每一个 color-mix() 都必须是「已知颜色 + 显式权重 + 明确色彩空间」三者齐全，缺一不可。它不 transition，不变量，不自动 fallback——写错一个字符，用户看到的就是空白或继承色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
