color-mix()等CSS原生颜色函数不支持参数嵌套，因解析阶段仅接受可立即计算的颜色值（如#f00、rgb()），遇color-mix()等函数调用会静默失败或报错；须用自定义属性分步存储中间结果实现逻辑分层。
不能直接嵌套 CSS 色彩函数——color-mix()、hwb()、lab() 等原生函数不支持在参数里再写另一个色彩函数，浏览器会报语法错误或静默失败。
为什么 color-mix(in srgb, red, color-mix(...)) 会失效
CSS 函数调用是纯解析阶段的文本替换，不是运行时表达式求值。color-mix() 的每个参数必须是可立即解析的颜色值（如 #f00、rgb(255 0 0)、oklch(60% 0.2 30)），不能是另一个函数调用。你写 color-mix(in srgb, red, color-mix(in lch, blue, white))，CSS 引擎会在解析第二层 color-mix() 时直接卡住，因为它期望一个颜色 token，而不是 color-mix 关键字。
常见错误现象：
- DevTools Styles 面板中该声明被划掉，显示
Invalid property value - 整个规则被忽略，背景/文字色回退到初始值
- 没有警告日志，容易误以为“只是没生效”，实则是语法层面拒收
替代方案：用 CSS 自定义属性做“逻辑分层”
把多层计算拆成多个独立的 color-mix() 步骤，每步结果存进 --var，再在下一步引用。这本质是手动模拟嵌套，但完全合法且可维护。
立即学习“前端免费学习笔记（深入）”；
使用场景：生成三级主题色（基础色 → 中间态 → 最终 UI 色），或响应不同背景动态调整文字对比度。
实操建议：
- 第一层混合结果必须显式指定色彩空间，例如：
--mid: color-mix(in srgb, #4CAF50 70%, #000 30%) - 第二层不能再用
color-mix()直接读--mid（自定义属性不是颜色值），得用color-mix(in srgb, var(--mid), #fff 10%)—— 注意var(--mid)在这里会被当作已解析的颜色值处理 - 避免循环引用：
--a: color-mix(..., var(--b)); --b: color-mix(..., var(--a))会导致计算中断，最终变量为空 - Chrome 120+ 支持
@supports (color: color-mix(in srgb, red, blue))检测，但不支持检测嵌套能力，别指望靠它兜底
mix-blend-mode 和 color-mix() 别混为一谈
mix-blend-mode 是渲染时图层混合，color-mix() 是样式计算时的颜色值生成。你在元素上设 mix-blend-mode: multiply，和用 color-mix(in srgb, red, blue) 得到一个紫色值，是两件事。
容易踩的坑：
- 想“先 mix 再 blend”，结果写了
background-color: color-mix(...); mix-blend-mode: overlay—— 这没问题，但别误以为mix-blend-mode会重新混合color-mix()的中间过程；它只管当前元素和它下面那层的像素级合成 - 用
color-mix()算出一个半透色（如color-mix(in srgb, rgba(0 0 0 / 0.3), white)），再套opacity: 0.8，透明度会相乘（0.3 × 0.8 = 0.24），不是叠加 - 如果目标是视觉上的“多层融合感”，优先用
background-blend-mode+ 多层渐变，比硬凑color-mix()更可控
真正难的不是写几层 color-mix()，而是搞清每一层的输入是否已确定、色彩空间是否一致、以及最终值是否要参与后续 alpha 叠加——这些细节一旦错位，结果色就会偏灰、发亮或对比不足，而且很难从 DevTools 的 Computed 面板一眼看出问题根源。
