color-mix() 必须显式声明色彩空间（如 in oklch）、权重带%、避免变量和透明色，否则跨浏览器行为不一致且静默失效；设计稿还原需手动对齐工具逻辑而非依赖自动适配。
color-mix() 默认用 sRGB 空间，但设计稿常基于 OKLCH 或 LCH
设计工具（Figma、Sketch）默认用感知均匀色彩空间（如 OKLCH）做明度/彩度调节，而 color-mix() 若不显式声明空间，浏览器可能按 in srgb 解析——但实际行为不一致：Chrome 111+ 默认 fallback 到 sRGB，Safari 16.4+ 却可能用 display-p3，Firefox 甚至直接拒解析。结果就是同一行代码在不同环境输出不同颜色，且和设计稿对不上。
- 别信“没写
in srgb就是 sRGB”——必须显式写，否则整条声明可能被跳过 - 想匹配 Figma 的“亮度 +20%”，不能直接
color-mix(in srgb, #2563eb 80%, white 20%)，得先用 DevTools 把设计稿色转成oklch(L C h)，再用color-mix(in oklch, ...) -
in oklch在 Safari 16.4+ 不支持，Chrome/Edge 111+ 和 Firefox 119+（需开启layout.css.color-mix.enabled）才可用；没 fallback 就等于没写
权重总和≠100% 时浏览器自动归一化，但设计稿按固定比例算
你写 color-mix(in srgb, #2563eb 60%, #1e40af 20%)，浏览器会归一为 75% / 25%，而设计稿导出的中间色可能是严格按 60/40 插值得到的。这种偏差在浅色混合时尤其明显——比如 #f9fafb 和 #2563eb 混合，sRGB 下线性插值会塌陷明度，视觉上比设计稿更灰、更浊。
- 设计稿里“主色 70% + 背景色 30%”是精确比例，
color-mix()必须写成#2563eb 70%, #f9fafb 30%，不能省略任一百分比 - 写成
#2563eb 70, #f9fafb 30（缺 %）或#2563eb, #f9fafb（无权重）——整条声明静默失效，颜色回退到前一个有效值 - 负数权重虽被 Chrome/Safari 允许，但超出 sRGB 色域后渲染为最近可显色，不可控，设计还原度归零
输入颜色不是字面量，导致整个函数被忽略
设计系统里常用 var(--primary) 或 currentColor 传色，但 color-mix() 不接受变量、不读取计算上下文。你写 color-mix(in srgb, var(--primary) 70%, black 30%)，浏览器直接报 Invalid property value，整条样式丢弃，最终显示的是 fallback 色或继承色。
- 必须把变量提前展开：用 PostCSS 插件预处理，或手写死值如
#2563eb、hsl(210 70% 60%) -
currentColor同样不行——哪怕父元素 color 是确定的，color-mix()也不识别 - 十六进制简写（如
#333）没问题，但 RGBA 透明色（如rgba(37, 99, 235, 0.8)）会被当作无效输入，静默失败
@supports 检测不准，fallback 写错就彻底失配
很多人用 @supports (color-mix: normal)，但这个语法在 Safari 16.4+ 返回 true，却不一定支持 in oklch；或者在 Firefox 119+ 开启了标志但未刷新 CSS 缓存，导致检测通过却执行失败。结果 fallback 没触发，设计稿色完全丢失。
- 检测必须带完整调用：
@supports (color: color-mix(in srgb, red, blue))，否则无效 - fallback 必须写在
color-mix()前一行，且是静态色值：color: #2563eb; color: color-mix(...);，不能只靠@supports包裹 - 别在复合属性里嵌套：
background: color-mix(...) no-repeat;会整体失效；拆成--mixed-bg: color-mix(...); background-color: var(--mixed-bg);
color-mix() 都是独立计算，它不感知设计系统里的语义层级（比如“强调色 = 主色 + 10% 明度”），也不理解设计师说的“看起来更柔和”——那只是人眼对 OKLCH L 通道的线性响应，不是 sRGB 数值加减。还原设计稿，本质是把设计工具的色彩逻辑手动对齐到浏览器支持的子集，而不是让 CSS 自动适配设计。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
