color-mix() 无法动态生成悬停色，仅支持字面量颜色和固定比例，不解析 css 变量或 currentcolor；需显式声明色彩空间、百分比总和为100%，并配合 @supports 回退及手动调参。
color-mix() 不能“动态生成”任意按钮的悬停色——它只接受字面量颜色和固定比例，不认 currentColor、不解析 CSS 变量、也不响应伪类切换。所谓“动态”，实际是靠预设规则 + 手动调参 + 回退保障。
color-mix() 悬停色必须写死基础色和混合比例
浏览器在解析 color-mix() 时会严格校验三项：色彩空间必须显式声明（如 in srgb）、每个颜色后必须跟百分比、且总和必须为 100%、输入只能是字面量（#3b82f6、hsl(220 80% 50%) 等）。var(--primary) 或 currentColor 会直接导致整条声明失效，DevTools 中显示为 Invalid property value。
常见错误现象：
- 写成
color-mix(in srgb, var(--primary) 70%, black 30%)→ 样式被忽略 - 漏写
in srgb→ Safari/Chrome 均不生效 - 写成
red 60%, blue 30%（总和不足 100%）→ 解析失败
正确写法示例（主色 #3b82f6，悬停加深）：
button {
background-color: #3b82f6;
transition: background-color 0.2s ease;
}
button:hover {
background-color: color-mix(in srgb, #3b82f6 85%, black 15%);
}
移动端必须加 @supports 回退，否则部分用户无悬停效果
Firefox 完全不支持 color-mix()；Safari 对 in lch 支持有限；仅 Chrome 111+、Safari 16.4+、Firefox 115+ 支持 in srgb。纯靠它会导致按钮在 Firefox 上悬停无反应。
可靠回退方式是用 @supports 包裹，并提供一个手动预设的静态深色值：
@supports (color-mix: normal) {
button:hover {
background-color: color-mix(in srgb, #3b82f6 85%, black 15%);
}
}
@supports not (color-mix: normal) {
button:hover {
background-color: #2563eb; /* 手动调好的对应深色 */
}
}
注意：@supports (color-mix: normal) 是唯一能准确检测该函数可用性的写法；用 JS 注入 fallback 不如 CSS 原生回退快，尤其对首屏按钮交互很关键。
比例不是通用值，浅色/深色按钮需分别调试
同一混合比例对不同明度的基础色效果差异极大：
- 浅色按钮（如
#f0f9ff）加black 15%几乎看不出变化，可能需要black 30%才明显 - 深色按钮（如
#1e40af）加black 15%就容易发灰、失饱和，有时black 5%更安全 - 不要假设“加深 20%”有统一映射——
color-mix()在in srgb下混合结果偏灰，视觉上不如人眼预期“更暗”
建议做法：为每类主色（浅蓝、中蓝、深蓝、绿色等）单独定义一组混合参数，并在设计系统文档中标注适用范围。
transition 必须作用于最终属性，不能只靠变量级联
有人尝试这样写：
.btn {
--bg: #3b82f6;
background-color: var(--bg);
}
.btn:hover {
--bg: color-mix(in srgb, #3b82f6 85%, black 15%);
}
这不会触发过渡动画——因为 background-color 没有重新声明，浏览器不会重算该属性。CSS 自定义属性变更本身不可过渡（transition: --bg 无效）。
正确做法只有两种：
- 在
:hover中显式重写background-color（推荐，简洁可控） - 用 JS 动态设置
element.style.backgroundColor = "color-mix(...)";，再配合transition
另外，transition 必须写在默认状态里，且明确指定属性：transition: background-color 0.2s ease；写成 transition: all 容易意外触发布局重排。
真正麻烦的地方不在语法，而在于：你得为每种按钮主色手动试出一组“看起来合理”的混合参数，并维护两套颜色值（原始色 + 回退色）。没有银弹，只有逐个校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
