不能。color-mix() 仅支持两种颜色的线性混合，不理解“变暗20%”这类明度抽象描述；需指定混合色（如黑色）及比例，且效果因原色明度而异，无全局固定值。
color-mix() 能直接实现「变暗20%」吗？
不能。CSS 的 color-mix() 不接受百分比明度偏移这种抽象描述，它只做两种颜色的线性混合。所谓“变暗20%”，本质是降低亮度（L 在 LCH 或 HSL 中），但 color-mix() 本身不理解“亮度”——它只是按指定比例混合两个具体颜色。所以你得先明确：和谁混？混多少？才能逼近变暗效果。
实际中，最可靠的做法是用黑色混合，比例取决于原始色的明度。深色按钮（如 #333）加10%黑就可能过暗，而亮色（如 #f0f9ff）混30%黑才接近“视觉上暗20%”。没有全局固定值。
用 color-mix(in srgb, currentColor 80%, black 20%) 可行吗？
可行，但效果不一致。这个写法会无差别地把任意 currentColor 和黑色按 4:1 混合，对浅色按钮（比如 lightblue）确实看起来“暗了”，但对已经较深的颜色（比如 darkslategray），结果会发灰、失饱和，甚至接近纯黑，完全不是“暗20%”，而是“脏20%”。
常见错误现象：color-mix(in srgb, #ff6b6b 80%, black 20%) → 得到偏棕灰的暗红，原色的暖感丢失；color-mix(in srgb, #2a9d8f 80%, black 20%) → 绿色变浊，像蒙了层灰。
- 混合空间选
srgb最兼容，但明度响应非线性，浅色变化小、深色变化大 - 想更均匀控制明度，可改用
lch空间（Chrome 111+、Safari 16.4+ 支持）：color-mix(in lch, currentColor 80%, black 20%)，此时亮度（L）更接近线性衰减 - 务必加
@supports (color-mix: normal)回退，否则老浏览器按钮悬停无反应
如何让不同背景色的按钮都“安全变暗”？
别硬套一个混合比例。推荐两步走：一是用 CSS 自定义属性预设基础色，二是为每种主色手动微调混合权重，或改用 hsl() 调整亮度（兼容性更好）：
button {
--btn-color: #4f46e5;
color: white;
background-color: var(--btn-color);
}
<p>button:hover {
/<em> fallback for older browsers </em>/
background-color: hsl(from var(--btn-color) h s calc(l - 15%));
/<em> modern: lch gives smoother darkening </em>/
@supports (color-mix: normal) {
background-color: color-mix(in lch, var(--btn-color) 85%, black 15%);
}
}</p>
注意：hsl(from ...) 中的 calc(l - 15%) 是相对当前亮度的绝对减法，不是“降15个百分点”——比如原色 L=70%，减15%后是55%，视觉上就是适度变暗；但若原色 L=20%，减15%后只剩5%，就太黑了。所以仍需按色系分组设置，比如蓝色系用 -15%，红色系用 -10%，灰色系用 -8%。
为什么不用 filter: brightness()？
因为 filter: brightness(0.8) 作用于整个元素（含文字、边框、阴影），且会干扰 background-blend-mode 或 backdrop-filter。更关键的是：它不改变 background-color 本身的计算值——如果你在 JS 中读取 getComputedStyle(el).backgroundColor，拿到的还是原始色，不是变暗后的色值。而 color-mix() 生成的是真实新颜色，可被其他逻辑复用（比如生成对应禁用态色）。
真正容易被忽略的点：color-mix 的输出色不可逆。一旦你写了 color-mix(in lch, #4f46e5 85%, black 15%)，你就没法用 CSS 再从这个结果里“提亮回原色”——没有反向函数。所以如果按钮有「正常→悬停→点击→禁用」多状态，建议所有状态都基于同一组自定义属性推导，而不是层层叠加 mix。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
