color-mix() 不能直接动画，需通过 transition background-color 实现悬停变暗：初始态设为 CSS 变量色，hover 态用 color-mix() 计算新色值，并配合 @supports 降级至 hsl()。
color-mix() 在按钮悬停中不直接支持动画
color-mix() 是一个 CSS 函数，用于在声明时静态混合两种颜色（比如 color-mix(in srgb, #007bff 70%, black)），但它**不是可动画属性**，也不能用在 :hover 的过渡链里。你不能写 transition: color-mix() 0.3s —— 浏览器会忽略它，因为 color-mix() 不是独立的 CSS 属性，只是函数值，只能出现在 color、background-color 等支持颜色值的地方。
所以想“用 color-mix() 实现悬停变暗”，实际做法是：在 :hover 里重新计算一次混合色，并让浏览器对 background-color 做过渡 —— 关键是确保起始色和结束色都是明确的、可插值的颜色值。
正确写法：在 :root 或变量中预定义 base 颜色，hover 时用 color-mix() 计算暗色
把主色抽成 CSS 自定义属性，再用 color-mix() 在 :hover 中生成对应暗色，同时保证两个状态的 background-color 都是具体颜色值（非函数），这样 transition 才生效。
示例：
立即学习“前端免费学习笔记（深入）”；
button {
--btn-base: #007bff;
background-color: var(--btn-base);
color: white;
transition: background-color 0.25s ease;
}
<p>button:hover {
background-color: color-mix(in srgb, var(--btn-base) 85%, black);
}注意点：
-
color-mix()必须写在支持它的浏览器中（Chrome 111+、Safari 16.4+、Firefox 119+），旧版会回退到未 hover 状态（需加降级） -
in srgb是推荐的色彩空间，避免在lch或oklch下因亮度非线性导致“看起来没变暗” - 混合比例建议从
80%–90%开始调，var(--btn-base) 85%, black表示 85% 主色 + 15% 黑，比直接darken()更可控
兼容性兜底：用 @supports 包裹，fallback 到 hsl() 调整
如果目标用户包含较老浏览器，别只靠 color-mix()。用 @supports 检测并提供降级方案：
button {
--btn-base: #007bff;
background-color: var(--btn-base);
transition: background-color 0.25s ease;
}
<p>@supports (background-color: color-mix(in srgb, red, blue)) {
button:hover {
background-color: color-mix(in srgb, var(--btn-base) 85%, black);
}
}</p><p>/<em> fallback：用 hsl() 降低亮度 </em>/
button:hover {
background-color: hsl(204, 100%, 45%); /<em> 手动对应 #007bff 的暗色 </em>/
}这里的关键是：fallback 的 hsl() 值必须和 color-mix() 输出结果视觉接近，否则会在支持新特性的浏览器里闪一下。可以用 DevTools 的颜色拾取器验证输出色值。
为什么不用 background-blend-mode 或 filter？
有人会想用 filter: brightness(0.85) 或 background-blend-mode: multiply 来模拟变暗，但它们有明显副作用：
-
filter作用于整个元素（含文字、边框、子元素），可能让文字也变暗甚至看不清 -
background-blend-mode要求至少两层背景（比如渐变+纯色），增加复杂度，且在浅色主题下容易失效 - 两者都不如直接换
background-color精准、可预测、性能好
真正需要平滑变暗，就老实用两个确定的颜色 + transition。而 color-mix() 的价值，是帮你免去手动算十六进制或 HSL 的麻烦，而不是替代过渡机制本身。
最易被忽略的一点：确保按钮的 background-color 初始值和 hover 值都明确、无透明度、无 gradient —— 只要其中一个是 transparent 或 rgba(..., 0.9)，过渡就可能发虚或跳变。
