color-mix()必须显式指定权重和色彩空间，否则整条声明静默失效；正确写法如color: color-mix(in srgb, red 50%, blue 50%)，并需前置静态色值fallback以保障关键视觉。
color-mix() 不是“加个函数就能混色”，它在旧浏览器里会直接被忽略，连 fallback 都不触发——写错顺序或漏权重，视觉就断层了。
color-mix() 必须带权重，否则静默失效
浏览器解析 color-mix() 时，只要任一颜色后没跟 <percentage> 或 <number>，整条声明就被丢弃，不报错、不警告、不回退到前一条 CSS 声明。
- ❌ 错误写法：
color: color-mix(in srgb, red, blue);（缺权重） - ✅ 正确写法：
color: color-mix(in srgb, red 50%, blue 50%);或color: color-mix(in srgb, red 0.7, blue 0.3); - 多色混合时总和不必等于 100%，浏览器会自动归一化：比如
red 30%, blue 70%, green 20%等效于red 25%, blue 58.3%, green 16.7%
in srgb 是最安全的颜色空间，别省略
不写 in srgb 时，浏览器按自身默认色彩空间解释（Safari 可能用 display-p3，Chrome 可能用 oklab），同一行代码在不同设备上渲染出明显不同的颜色。
- ✅ 明确指定：
background-color: color-mix(in srgb, #8A2BE2 60%, black 40%); - ⚠️ 慎用
in lch或in oklab：虽更符合人眼感知，但 Firefox 111+ 和 Safari 16.4+ 才稳定支持，且需确认设计系统真需要均匀色相过渡 - 别信 “
in normal” 这类写法——那是过时草案里的伪模式，现代浏览器根本不识别
必须用层叠 fallback，@supports 不够用
@supports 能检测语法支持，但无法兜底「权重写错」「颜色空间不支持」等运行时问题。真正可靠的降级，是靠 CSS 层叠本身。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确 fallback 顺序：
color: #6c757d;<br>color: color-mix(in srgb, #007bff 60%, #6c757d 40%);
- ❌ 错误依赖
@supports：@supports (background: color-mix(in srgb,red,blue)) { ... }—— 它只管语法，不管权重或空间是否被当前浏览器理解 - 关键视觉区分（如错误提示文字）绝不能只依赖
color-mix()；深红 vs 黑这种语义级对比，必须有确定的静态色值保底
color-mix() 和 mix-blend-mode 完全是两回事
一个算颜色值，一个叠像素——混用会导致预期外的透明、背景干扰甚至文字消失。
-
color-mix()在 CSS 计算阶段就产出一个确定的 RGB 值，可赋给color、background-color、自定义属性--mixed等 -
mix-blend-mode是绘制后对图层做像素级混合，受父容器背景、opacity、z-index 影响极大；给文字设mix-blend-mode: multiply不会生成新颜色，只会让它“吃掉”底下背景 - 想让按钮文字随主题背景自动变亮？用
color-mix()+light-dark()+ 自定义属性；想让标题浮在图片上发晕光？那才是mix-blend-mode的场景
最容易被忽略的是权重缺失导致的静默失败——它不像 JS 报错打断执行，而是让样式“看起来正常”，实则没生效。检查 DevTools 的 computed 面板里 color 值是否还是初始值，比看控制台更有用。
