color-mix() 混合 black 时必须显式指定 in srgb 或 in oklch，省略则被浏览器忽略；srgb 调试直观但暗部易发灰紫，oklch 明度更均匀但需写全 oklch(100% 0 0) 等格式；权重仅支持 70 或 70%，且总和须为 100%；降级必须用 @supports，且 color-mix() 输出为独立颜色值，不继承 opacity 或 mix-blend-mode。
color-mix() 混合 black 时必须指定 in srgb 或 in oklch
直接写 color-mix(var(--c) 80%, black 20%) 会被浏览器完全忽略——不报错、不渲染，就当这行 CSS 不存在。必须显式声明色彩空间：color-mix(in srgb, var(--c) 80%, black 20%) 或 color-mix(in oklch, ...)。当前主流浏览器（Chrome 111+、Safari 16.4+、Firefox 119+）都不支持省略空间名的写法。
用 srgb 还是 oklch？看你要不要感知均匀性
in srgb 行为最确定、调试直观，适合快速落地：比例每增减 10%，视觉明度变化大致线性，适合按钮悬停加深、边框压暗等场景。但极端深色（如 #1a1a1a）混黑后容易发灰紫，人眼感知上“变暗”感减弱。in oklch 明度（L）更贴合人眼，黑白混合得中性灰，不会在暗部塌陷。但需先将原色转成 oklch(L C h) 格式（例如 oklch(25.3% 0.182 278.6)），不能直接用 white 或 black 简写——必须写成 oklch(100% 0 0) 和 oklch(0% 0 0)。
百分比写法有硬约束，错一个字符就失效
color-mix() 的权重只接受两种格式：70% 或 70（无单位整数），不接受小数 0.7，也不接受缺单位的 70 后跟空格再写 %。常见翻车点：
-
var(--c) 70 %→ 多了个空格，解析失败 -
black 0.3→ 小数不合法 -
black 30→ 合法，等价于30% - 两个颜色权重加起来必须刚好 100%，
var(--c) 75%, black 25%✅，var(--c) 75%, black 30%❌
@supports 是唯一靠谱的降级手段
color-mix() 不会自动 fallback 到旧值，也不会和 darken() 或 HSL 计算共存。错误写法：color: color-mix(in srgb, var(--c) 80%, black 20%); color: darken(var(--c), 20%) —— 后者整条声明被丢弃，最终没颜色。
正确做法是用 @supports 包裹，并在外层设兜底：
button {
--primary-dark: #3a5fa8;
}
@supports (color: color-mix(in srgb, red, blue)) {
button {
--primary-dark: color-mix(in srgb, var(--primary) 80%, black 20%);
}
}
真正容易被忽略的是：color-mix() 输出的是一个全新颜色值，它不继承父元素透明度或混合模式；如果你依赖 opacity 或 mix-blend-mode 实现的“变深”，效果和 color-mix() 完全不同——前者是图层叠加，后者是像素重计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
