color-mix() 无法自动为任意按钮生成悬停色，因其要求显式声明色彩空间、颜色权重总和为100%、且仅支持字面量颜色，不支持 currentcolor 或 css 变量。
color-mix() 能直接生成悬停色，但必须写死颜色字面量、显式指定混合比例和色彩空间，且不能用 currentColor 或 CSS 变量作输入——这意味着你没法“自动”为任意按钮生成一致的悬停效果，只能为已知基础色预设规则。
color-mix() 悬停色写法必须满足三个硬性条件
浏览器解析 color-mix() 时会严格校验语法，缺一不可：
- 色彩空间必须显式声明：
in srgb最稳妥；in lch更均匀但 Safari 16.4+ 才支持，Chrome 111+ 可用 - 每个颜色后必须跟百分比权重，且总和必须等于
100%（写成red 60%, blue 30%会失效） - 颜色参数只能是字面量：
#2563eb、hsl(220 80% 50%)、rebeccapurple都行；var(--primary)或currentColor会报Invalid property value
移动端按钮悬停色的实际写法示例
假设主色是 #3b82f6（蓝色），想在悬停时加深——最可控的方式是与黑色混合，而非凭感觉调“暗20%”：
button {
background-color: #3b82f6;
transition: background-color 0.2s ease;
}
button:hover {
background-color: color-mix(in srgb, #3b82f6 85%, black 15%);
}
注意两点：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 比例不是固定值：浅色按钮（如
#f0f9ff）可能需要black 30%才明显变深；深色按钮（如#1e40af）加black 10%就可能发灰，得手动试 - 必须加
transition，且写在默认状态里；只写transition: all容易触发重排，推荐明确属性：transition: background-color 0.2s ease
@supports 回退是移动端刚需
Firefox 完全不支持 color-mix()，Safari 对 in lch 支持有限，纯靠它会导致部分用户悬停无反应：
@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; /* 手动预设一个更深的静态色 */
}
}
别依赖 JS 注入 fallback——移动端首屏加载快，CSS 回退更可靠。如果项目已用 CSS 自定义属性管理主题色，可把 fallback 色也定义为变量，保持维护一致性。
为什么不用 currentColor 或变量？
这是最容易踩的坑：很多人试图写 color-mix(in srgb, currentColor 80%, black 20%)，以为能复用文字色，结果整个声明被浏览器忽略。原因很直接：
-
currentColor是运行时计算值，color-mix()不接受动态上下文 - 自定义属性（如
var(--btn-bg)）在解析color-mix()时还未求值，语法层面就非法 - Less/Sass 等预处理器也无法编译出有效
color-mix()表达式——它们不认识这个函数，会报Operation on an invalid type
真正能用的只有编译后确定的十六进制、RGB 或 HSL 字面量。如果你的按钮色来自主题系统，就得在构建时把基础色固化为具体值，再生成对应的 color-mix() 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
