color-mix() 在 firefox 默认禁用、safari 支持不全，仅 chrome/edge 111+ 较稳定；必须显式指定色彩空间（如 in srgb）、具体颜色值和权重，且需 fallback + @supports 双保险，无法动画，动态场景需 js 处理。

不能直接用——截至2026年5月，color-mix() 在 Firefox 仍默认禁用（需手动开启 layout.css.color-mix.enabled），Safari 16.4+ 虽支持但未覆盖全部设备，Chrome/Edge 111+ 是唯一较稳的环境。写死 color-mix(in srgb, red 50%, blue 50%)，多数用户看到的只是浏览器静默忽略后的前一个有效颜色值。

为什么写了 color-mix() 却没效果？

常见错误不是语法错，而是环境不认：

• Invalid property value 或颜色直接回退为初始值，基本可断定是浏览器不支持该函数
• 漏写色彩空间（如 in srgb）——省略会导致整个声明无效，不是警告，是彻底跳过
• 用了变量或 currentcolor：color-mix(in srgb, var(--primary), blue) 静默失败，必须是解析后的具体颜色值
• 权重格式错误：写成 red 60, blue 40（缺 % 符号）或 red 60%, blue（后者无权重）都会被忽略

怎样写才能让 color-mix() 至少“看起来生效”？

靠 fallback + @supports 双保险，不是为了“兼容旧版”，而是应对真实用户环境的碎片化：

wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support

基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。

下载

• 始终把静态色写在前面：color: #2563eb; color: color-mix(in srgb, #2563eb 70%, #1e40af 30%);
• 用 @supports (color: color-mix(in srgb, red, blue)) 包裹整段逻辑，避免不支持时样式错乱
• 别在 background 这类复合属性里直接嵌套：background: color-mix(...) no-repeat; 会整体失效；拆成 --mixed-bg: color-mix(...); background-color: var(--mixed-bg);
• 权重加起来不必等于 100%：red 2, blue 1 等价于 red 66.6%, blue 33.3%，浏览器自动归一化

color-mix() 的混合结果能动画吗？

不能。它只生成一个静态颜色值，比如 color-mix(in srgb, #007bff 30%, #fff 70%) 解析后就是 #81aef5，和手写这个十六进制没区别。transition 对它不起作用。

• 想实现悬停渐变？得先用 color-mix() 算出起点色和终点色，再转成 hsl() 或 oklch() 格式参与 CSS 插值
• 例如：color: hsl(210, 70%, 60%); transition: color 0.3s; → hover 里设 color: hsl(210, 70%, 90%)，这才是真平滑
• 别指望 color-mix() 自己动起来——它连变量都不认，更别说实时响应 hover 状态了

真正容易被忽略的是：你写的每一个 color-mix() 都必须是「已知颜色 + 显式权重 + 明确色彩空间」三者齐全，缺一不可。它不是调色板，也不是 JS 函数，而是一个在 CSS 计算阶段就固化下来的值。想动态？还是得靠 JS 解析、计算、注入 style —— 哪怕只差那 0.1% 的覆盖率，生产环境里也得当它不存在。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！