color-mix() 仅生成静态色值，无法直接动画；需先用它计算起止色，再转为hsl()或oklch()并配合transition实现平滑过渡。
color-mix() 本身不能实现“平滑过渡”效果，它只输出一个静态色值；所谓“类似滤镜的渐变感”，必须靠它生成起止色，再用 hsl() 或 oklch() 做插值动画。
为什么直接给 color-mix() 加 transition 没用
浏览器在解析阶段就把 color-mix(in srgb, red 70%, blue) 替换成具体颜色（比如 #804080），后续动画系统看到的只是两个固定色值——中间没有可插值路径。你写：
button { color: color-mix(in srgb, #007bff 100%, #fff 0%); transition: color 0.3s; }
button:hover { color: color-mix(in srgb, #007bff 0%, #fff 100%); }
实际表现是跳变，不是渐变。
真正能动的组合：先算色，再转空间，最后过渡
想让文字从深蓝主色“泛白”式淡出，得拆成两步：
- 用
color-mix()算出语义明确的起点和终点色（比如悬停前后的混合结果） - 把这两个色手动转成
hsl()或oklch()格式，再写transition
示例（起点为深蓝+灰混合，终点为浅灰+白混合）：
.btn {
color: hsl(220, 80%, 30%); /* ← 用 color-mix(in oklch, ...) 算好后转成 hsl */
transition: color 0.4s ease-in-out;
}
.btn:hover {
color: hsl(220, 10%, 85%);
}
注意：oklch() 插值更符合人眼感知，但需检查浏览器支持（Chrome 111+/Safari 16.4+）；hsl() 兼容性更好，跨色相时仍比 rgb() 稳定。
兼容性兜底必须用 PostCSS 静态降级
Firefox 和旧 Edge 完全不识别 color-mix()，会直接丢弃整条声明——不是回退，是失效。必须用 postcss-color-mix 插件构建时展开：
- 配置里加
preserve: false，否则会残留原始声明导致样式错乱 - 指定
space: 'srgb'，避免lch或oklch降级失败 - 百分比必须是字面量（如
70%），不能是 CSS 变量（如var(--p)）
否则构建产物里可能同时存在 color-mix(...) 和降级色，新旧浏览器渲染不一致。
最容易被忽略的是：color-mix() 的价值不在动画本身，而在可控、可复用的中间色生成；把它当“调色器”用，别当“动画函数”用。过渡是否顺滑，最终取决于你选的插值空间和缓动曲线，不是 color-mix() 的参数精度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
