color-mix()在旧版浏览器中失效，因chrome 111前、safari 16.4前、firefox 112前完全不解析该函数，遇之即静默跳过整条声明；必须显式指定色彩空间（如in srgb）、使用颜色字面量、带%权重，且fallback需置于@supports外并前置。
直接原因是 color-mix() 在解析阶段就失败了，浏览器静默丢弃整条声明——不报错、不警告、颜色直接“消失”，而不是变灰或变暗。
为什么写对了语法却没颜色？
常见失效不是你算错了，而是浏览器根本没执行它：
-
currentColor、var(--c)、hsl(var(--h), ...)等动态值全部不被接受；输入必须是字面量，比如#2563eb、oklch(55.2% 0.215 252.3)、red - 漏写
in srgb或in oklch（大小写敏感）→ 整条声明被跳过，DevTools 显示 “invalid value” - 权重缺单位：
red 60或blue 40%后面少个%→ 静默忽略，不是四舍五入 - Safari 16.4 之前、Firefox 全版本根本不支持
color-mix()，写了等于没写
色彩空间选错，结果偏得离谱
混合路径由空间决定，不是“换个写法而已”：
-
in srgb是线性插值，深色区域容易发紫、中间灰阶发闷 -
in oklch按人眼感知明度插值，亮变暗更平滑，但必须写全格式：oklch(100% 0 0)，不能简写为oklch(0 0 0) - 混用空间会失效：
color-mix(in oklch, #2563eb 60%, white 40%)错——#2563eb是 sRGB，white是命名色，默认空间不一致 - 想用
oklch，两个输入都得是oklch(...)格式，且权重带%
@supports 检测写错，fallback 彻底失效
检测本身出错，会导致旧浏览器连 fallback 都看不到：
- 写
@supports (color-mix: ...)→ Safari 16.4 之前整块 CSS 被丢弃，fallback 白写了 - 正确检测是
@supports (color: oklch(0% 0 0))或@supports (color: lch(0% 0 0))，因色彩空间比函数更早落地 - fallback 必须写在
@supports块**外面且在上方**：color: #2563eb;必须在前，@supports { color: color-mix(...); }在后；顺序反了，Chrome 111 之前可能跳过 fallback - fallback 只能用
#rrggbb、rgb()、hsl()、命名色；不能用oklch()或color-mix()输出作 fallback
你以为它能动，其实它只是算一次
color-mix() 不响应任何变化，输出就是个静态 RGB 值：
- 放进
:hover、@keyframes或transition里，不会渐变，只会跳变——它不参与插值，浏览器只认最终计算出的固定颜色 - 想实现悬停变色，得先用
color-mix()算出起点和终点色，再手动转成hsl()或oklch()写进transition - 它不读取背景、不处理透明度、不继承
opacity，所谓“透明叠加”效果必须靠rgba()、mix-blend-mode或多层伪元素
最容易被忽略的是：你写的每一处 color-mix() 都必须同时满足「字面量颜色 + 显式 in 空间 + 权重带 %」三者，缺一即失效；它不是调试工具，是编译期确定值，一旦写错，连 DevTools 都不给你提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
