color-mix() 必须严格包含色彩空间（如in srgb）、颜色值和权重三要素，缺一不可；in srgb是当前唯一广泛支持且结果确定的选项，其他空间兼容性差；需配合fallback和@supports检测，并避免在复合属性或动画中误用。
直接写 color-mix(in srgb, red 60%, blue 40%) 就能生成确定的中间色，但漏掉 in srgb、权重或空格错位，整条声明会被浏览器静默丢弃——控制台不报错，DevTools 里只显示“无效值”。
color-mix() 语法必须三要素齐全
它不是“可选参数”的函数，而是严格按规范解析：色彩空间、颜色值、权重，缺一不可。
-
in srgb必须显式写出，in rgb或in RGB都不合法；大小写敏感，sRGB也不行 - 每个颜色后必须紧跟权重，
red 60%✅，red❌，red 60（缺 %）❌ - 空格是分隔符，不能用逗号：
red 60%, blue 40%会整个失效，必须写成red 60% blue 40% - 权重总和不必等于 100%，
red 2 blue 1会被自动归一化为 66.6%/33.3%
为什么用 in srgb 而不是 in lch 或 in oklch
想快速落地、确保多数用户看到一致结果，in srgb 是唯一选择。其他空间目前支持太碎片：
-
in lch：Safari 16.4+ 支持，Firefox 当前仍不识别，@supports检测不到实际实现 -
in oklch：Chrome/Edge 可用，但 Safari 和 Firefox 均未支持（截至 2026 年 10 月） -
in srgb：Chrome 111+、Edge 111+、Safari 16.4+ 均可用，且结果可复现、可测试 - 别被“感知均匀”误导：做品牌色阶、按钮悬停态、无障碍微调时，
in srgb的确定性比“更自然”更重要
混合白/黑生成 tint/shade 时的常见翻车点
直接写 color-mix(in srgb, #3a5fa8 70%, white 30%) 看似合理，但结果会偏灰紫——因为 srgb 空间里黑白混合不保明度线性，且无法保证中性灰。
- 必须换到
in oklch或in lch：只有这两个空间支持黑白作为纯明度锚点（oklch(100% 0 0)是白，oklch(0% 0 0)是黑） - 不能拿原始色直接混：先用 DevTools 把
#3a5fa8转成oklch(L C h)，比如oklch(55.2% 0.215 252.3)，再混合 - 浅色变体写法：
color-mix(in oklch, oklch(55.2% 0.215 252.3) 60%, oklch(100% 0 0) 40%) - 深色变体写法：
color-mix(in oklch, oklch(55.2% 0.215 252.3) 70%, oklch(0% 0 0) 30%) - 注意：两个颜色都必须完整写出
oklch()格式，white或black不被接受
fallback 和 @supports 不是可选项，是必填项
Firefox 仍默认禁用 color-mix()，旧版 Safari 和部分安卓 WebView 完全不认——你写的每一条 color-mix() 都可能被跳过。
- fallback 必须靠层叠：先写静态值，再覆盖
color-mix()，例如color: #2563eb; color: color-mix(in srgb, #2563eb 70%, #1e40af 30%) -
@supports (color: color-mix(in srgb, red, blue))只能检测语法是否被识别，无法确认浏览器是否真正实现了该空间；它防不了 Safari 16.4 识别语法但忽略in lch这类情况 - 别在复合属性里硬塞：
background: color-mix(...) no-repeat会整体失效；拆成--mixed-bg: color-mix(...); background-color: var(--mixed-bg) - 它不能动画：
color-mix()输出的是一个固化值，transition对它无效；想做悬停渐变，得提前算好起点/终点色，改用hsl()或oklch()格式参与插值
最常被忽略的其实是：你写的每一个 color-mix() 都必须是「已知颜色字面量 + 显式权重 + 正确色彩空间」三者同时存在。它不接受变量、不响应状态、不参与计算——它只是 CSS 计算阶段的一个快照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
