color-mix() 不能在 :active 中动态调用，因css规范禁止伪类内使用函数式颜色表达式；需预计算混合值或通过css变量绑定实现点击态，如 --brand-active: color-mix(in srgb, var(--brand) 80%, black 20%)。
color-mix() 确实能做品牌色 + 黑色的点击态，但得先确认浏览器支持——目前仅 Chrome 111+、Safari 16.4+、Firefox 119+ 原生支持，且不支持在 :active 伪类中动态计算（CSS 不允许在伪类里调用函数）。
直接用 color-mix() 写死点击态颜色
最稳妥的做法是提前算好混合结果，作为静态值写入 :active。比如品牌色是 #3b82f6（blue-500），想混入 20% 黑色：
button {
background-color: #3b82f6;
}
button:active {
background-color: color-mix(in srgb, #3b82f6 80%, black 20%);
}
注意：color-mix() 的权重顺序很重要——前面是主色，后面是叠加色；in srgb 是默认色彩空间，可省略，但显式写出更安全（避免未来新空间行为变化）。
- 别写成
color-mix(in srgb, black 20%, #3b82f6 80%)，这会把黑色当主色，结果偏灰而非压暗 - Chrome DevTools 的“颜色取色器”能实时预览
color-mix()效果，右键颜色值 → “Pick color” → 切到“Color mix”面板 - 如果设计系统要求“点击态比常态暗 15%”，
color-mix()不等价于亮度减法，它按通道线性插值，视觉上可能偏暗或偏浊，需人工校验
用 color-mix() 配合自定义属性批量生成态
适合多组件复用同一套明暗逻辑。把品牌色抽成 --brand，再用 :root 或组件级变量控制混合比例：
:root {
--brand: #3b82f6;
--brand-active: color-mix(in srgb, var(--brand) 80%, black 20%);
}
button:active {
background-color: var(--brand-active);
}
这样改品牌色时，所有 :active 态自动更新。但要注意：
-
color-mix()在var()中必须写在声明值位置，不能放在 calc() 或其他函数里嵌套 - PostCSS 或构建工具（如 Lightning CSS）暂不支持编译
color-mix()，降级方案得靠 CSS 变量 fallback 或 JS 注入 - 如果要支持老浏览器，得加一层
background-color: #2563eb;（手动算好的 fallback 色）在color-mix()前面
为什么不能在 :active 里动态调用 color-mix()？
不是语法错，是 CSS 规范限制：伪类选择器中不允许使用函数式颜色表达式。下面这段会完全失效：
button:active {
background-color: color-mix(in srgb, var(--brand), black 20%); /* ❌ 不生效 */
}
原因在于 :active 是运行时状态，而 color-mix() 是声明期计算（类似 calc()），两者生命周期不匹配。目前唯一可靠路径是预计算或变量绑定。
- 别指望用
@property+color-mix()搞动态响应——@property不支持 color 类型的动画插值 - 若真需要运行时混合（比如主题切换时重算），只能用 JS 获取
getComputedStyle后用color-mix()字符串拼接再 setStyle，但性能差且破坏 CSS 声明式逻辑
真正麻烦的点不在怎么写，而在验证——不同浏览器对 color-mix() 的舍入精度、sRGB gamma 处理有细微差异，尤其是浅色品牌色混黑后，在 OLED 屏上可能发灰。上线前务必在真机上点按对比常态与点击态的明度差是否符合设计预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
