color-mix() 无法自动变暗按钮，因不支持 currentcolor/变量且 srgb 混合黑白会发灰；必须用 oklch 空间手动指定主色与黑色比例（如 75%/25%），并配合 @supports 回退、transition 和 background-clip 保障兼容与渲染正确。
不能直接用 color-mix() 把任意按钮“自动变暗”，它不读取当前背景色，也不支持变量或 currentColor；想让悬停看起来更暗，必须手动指定基础色 + 黑色比例，并用 oklch 或 lch 空间才靠谱。
为什么 color-mix(in srgb, #3b82f6, black) 会失效或发灰
浏览器会直接拒绝这个写法：缺少权重百分比、没声明色彩空间（in srgb 不支持黑白线性混合）、且 srgb 空间下插值会压低视觉亮度。结果不是均匀变暗，而是饱和度塌陷、偏紫灰。
-
color-mix()要求每个颜色后跟明确百分比，总和必须是100%，比如#3b82f6 85%, black 15% -
in srgb混合黑白时，中间灰阶不中性；in oklch才能保证 L 值线性变化，黑（oklch(0% 0 0)）白（oklch(100% 0 0)）混合出的灰才是真中性 - 你得先把按钮主色转成
oklch()格式——用 Chrome DevTools 颜色拾取器点一下就能看到，比如#3b82f6→oklch(62.4% 0.247 252.1)
正确写法：用 oklch 混合黑色降低明度
目标是“视觉上更暗但不发灰、不偏色”，核心是只动 L 值，C 和 h 尽量保持原样。下面这段可以直接抄：
button {
--primary-oklch: oklch(62.4% 0.247 252.1);
}
button:hover {
background-color: color-mix(in oklch, var(--primary-oklch) 75%, oklch(0% 0 0) 25%);
}
- 比例不是固定的：浅蓝（
L ≈ 85%）可能要black 30%才明显；深蓝（L ≈ 40%）加10%就可能糊成一片 - 别写
currentColor或var(--primary)当参数——color-mix()目前完全不认，会静默失败 - 必须加
transition: background-color 0.2s ease，且写在默认状态里，不然悬停是跳变
@supports 回退不能省，Firefox 完全不支持
Chrome 111+、Safari 16.4+ 支持 color-mix()，Firefox 119+ 才开始实验性支持；旧版 Firefox 和所有旧 Edge 会直接忽略整条 background-color 声明，按钮悬停后可能变透明或继承父背景。
- 用
@supports (color-mix: normal)包裹新语法，降级色必须手选——比如#2563eb是#3b82f6的经验加深值 - fallback 色不能靠 JS 注入，移动端首屏加载快，CSS 层叠回退最稳
- 别漏掉
background-clip: padding-box，圆角按钮不设这个，color-mix()新背景会在边缘外溢，穿帮
真正难的不是写出那一行 color-mix()，而是确保它在 Safari 里不偏色、在 Firefox 里不消失、在圆角边缘不露底——这些细节一漏，用户看到的就是一个穿帮的按钮，而不是“优雅变暗”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
