必须将 fallback 颜色写在 color-mix() 声明之前，靠 CSS 层叠降级；@supports 检测不能替代此步骤，否则旧浏览器会彻底丢弃颜色。
直接写 fallback 颜色值在 color-mix() 声明之前，靠 CSS 层叠机制降级；@supports 检测不能替代这一步，否则旧浏览器会彻底丢弃颜色。
fallback 必须前置同一属性内，不能拆开或包裹
旧浏览器遇到不认识的 color-mix()，会整条声明跳过，但会继续处理前面同名属性的有效值。所以必须把保底色写在前面：
-
color: #3a5fc7;—— 这行生效 -
color: color-mix(in srgb, #3a5fc7 70%, #ffffff 30%);—— 不支持时被忽略
错误做法包括：把 fallback 写在 @supports 块里、写在后面、或用不同选择器分开定义——这些都会导致旧环境无颜色可回退。
@supports 检测要带完整参数，且不能用于 fallback 主路径
@supports (color: color-mix(in srgb, red, blue)) 是目前唯一能较稳识别 color-mix() 支持的写法。但注意：
立即学习“前端免费学习笔记（深入）”；
- 写成
@supports (color-mix: )或@supports (color: color-mix())会直接被所有浏览器当作语法错误丢弃 - 检测成功后写的样式，仍需自己再写一遍 fallback（即块内也要有前置静态色），因为 Safari 16.3 等旧版虽通过检测，却仍不支持权重解析
- 别用
@supports not控制 fallback——IE 和旧 Safari 根本不解析@supports，整块规则消失
色彩空间和权重格式错一个，fallback 就失效
color-mix() 静默失败的常见原因不是浏览器不支持，而是语法不合法：
- 漏
in srgb→ 整条声明被跳过（Firefox 默认按srgb-linear，Chrome/Safari 按srgb，结果不一致） - 写
red 60而非red 60%→ 解析失败，无警告 - 颜色空间名大小写错，如
in SRGB或in rgb→ 不合法，声明无效 - 用了
var(--primary)或currentColor→ 静默失败，连降级都触发不了
真正容易被忽略的是：你看到颜色没变，大概率不是浏览器版本问题，而是某处空格、单位或大小写错了——DevTools 里这条声明会显示为“invalid value”，但不会标红报错。
