color-mix() 兼容性有限且需显式声明色彩空间，应提供静态色值 fallback；它计算颜色值，与 mix-blend-mode 的图层混合本质不同；权重不可省略，推荐用 sRGB 确保跨设备一致。
color-mix() 不支持所有浏览器，别急着删掉 fallback
目前 color-mix() 仅在 Chrome 111+、Edge 111+ 和 Safari 16.4+ 中可用，Firefox 完全不支持（截至 2024 年中）。直接写 color-mix(in srgb, red 50%, blue 50%) 而不提供降级，会导致旧环境颜色彻底失效或回退到初始值（比如 inherit 或透明）。
实操建议：
- 始终用
color属性的层叠顺序写 fallback：先写静态色值，再覆盖color-mix() - 避免依赖
color-mix()做关键视觉区分（比如错误提示红 vs 正常黑），它不是渲染保障 - 如果需精确控制混合空间（如确保是 sRGB 而非 display-p3），必须显式声明
in srgb，否则浏览器可能按默认色彩空间解释
mix-blend-mode 是图层混合，color-mix() 是颜色值计算，别混用
mix-blend-mode 作用于元素绘制后的像素叠加，受父容器背景、z-index、opacity 影响；而 color-mix() 在 CSS 计算阶段就生成一个确定的颜色值，和布局、堆叠完全无关。常见错误是以为给文字加 mix-blend-mode: multiply 就能替代 color-mix() —— 实际上前者会让文字“融入”背景，后者才真正产出新色值用于 color、background-color 等属性。
使用场景差异：
立即学习“前端免费学习笔记（深入）”；
- 想让按钮文字随背景自动变亮/变暗？用
color-mix()+light-dark()配合自定义属性 - 想做标题文字与图片背景的溶解效果？那是
mix-blend-mode的地盘 - 需要把两个 CSS 变量颜色混合后复用多次？
color-mix()可以赋给--mixed自定义属性；mix-blend-mode不产生新颜色值，无法复用
百分比权重不能省略，且只接受 <percentage> 或 <number>
color-mix() 的语法强制要求每个颜色后跟权重，比如 red 40% 或 blue 0.6。写成 color-mix(in srgb, red, blue) 会直接被忽略——CSS 解析器连警告都不报，静默失败。
参数细节注意点：
- 权重总和不必等于 100% 或 1：浏览器会自动归一化，
red 20%, blue 30%等价于red 40%, blue 60% - 支持负数权重（Chrome/Safari 允许），但结果可能超出 sRGB 色域，渲染为最近可显示色，行为不可控，不建议用
- 不能混用单位：
red 0.5, blue 50%合法；但red 50, blue 50%（缺单位）会解析失败
动态主题里用 color-mix() 需配合 :root 变量和 calc() 微调
单纯靠 color-mix() 做深色模式适配不够稳——比如想让文字在浅底上是 color-mix(in srgb, black 70%, white 30%)，在深底上变成 color-mix(in srgb, white 70%, black 30%)，得靠媒体查询或 light-dark() 包一层。但更常见的是：设计师给的“主色”是变量，混合比例还要随状态微调（如 disabled 时降低饱和度）。
实操建议：
- 把基础色存为
--primary: #3b82f6，再用color-mix(in srgb, var(--primary) 80%, black 20%)控制深色强度 - 需要响应式混合比例？目前无法直接绑定
calc()到权重位置（red calc(30% + 10%)无效），只能预设几档变量，如--mix-ratio: 60%，再写red var(--mix-ratio) - 混合结果若在深色背景下不够对比，别硬调权重，优先检查是否该换色彩空间（
in lch对亮度控制更直观，但兼容性更差）
最易被忽略的一点：color-mix() 的色彩空间声明不是可选修饰，而是行为开关。不写 in srgb，不同浏览器可能用 display-p3 或 lab 解释，同一段代码在 MacBook Pro 和 Windows 笔记本上渲染出不同灰度——这不是 bug，是规范留的自由度。真要跨设备一致，in srgb 必须显式带上。
