color-mix()不能生成带透明度的颜色，仅输出不透明RGB/OKLab值；需配合rgba()、rgb()新语法或层叠fallback实现视觉等效，且必须用两个不透明字面量颜色，禁用transparent或含alpha颜色作为输入。
color-mix() 不能直接生成带透明度的颜色——它输出的永远是不透明的 RGB/OKLab 值。所谓“带透明度的状态色”，必须靠 color-mix() 算出基础色，再配合 rgba()、rgb() 新语法或 background-color 的层叠 fallback 来实现视觉等效。
为什么 color-mix(in srgb, #000, transparent) 会失效
浏览器根本不认 transparent 作为 color-mix() 的输入参数，整条声明会被静默丢弃。你写：
color: color-mix(in srgb, #1e293b, transparent);
结果就是该属性完全不生效，文字可能回退到继承色或默认色，尤其在旧版 Firefox（≤118）里毫无提示。
真正能用的只有两个不透明颜色字面量，比如：
立即学习“前端免费学习笔记（深入）”；
-
color-mix(in oklch, #007bff 80%, white 20%)✅ -
color-mix(in srgb, #3b82f6, #e2e8f0)✅ -
color-mix(in srgb, #000, rgba(255,255,255,0.2))❌ ——rgba()中的 alpha 被忽略，只取255,255,255
hover / disabled 状态下怎么安全套用
核心原则：状态色 ≠ 透明度调整，而是语义弱化。别试图让 color-mix() 模拟 opacity，要手动选两个有对比梯度的不透明色做混合。
例如按钮禁用态文字色：
- 浅色模式：用
color-mix(in srgb, #1e293b 70%, #cbd5e1 30%)→ 暗灰，保留可读性 - 深色模式：换为
color-mix(in srgb, #f1f5f9 70%, #64748b 30%)→ 亮灰，避免发白 - 必须前置 fallback：
color: #94a3b8; color: color-mix(in srgb, #1e293b 70%, #cbd5e1 30%); - 别用
currentColor或未解析变量（如var(--text)），它们在color-mix()里无效
想模拟“半透黑遮罩”？这样写才对
常见需求是悬停时加一层黑色半透 overlay，但 color-mix() 本身不产 alpha，得靠组合：
正确写法：
button:hover {<br> background-color: rgba(0, 0, 0, 0.4);<br> background-color: color-mix(in oklch, #000 80%, #fff 20%);<br> background-clip: padding-box;<br>}
说明：
-
rgba(0, 0, 0, 0.4)是降级值，所有浏览器都认 -
color-mix()输出的是一个更自然的灰（不是纯黑+alpha），在 OKLCH 空间里明暗过渡更平滑 -
background-clip: padding-box防止圆角处颜色外溢，露出父容器背景 - 别写
color-mix(in srgb, var(--bg), rgb(0 0 0 / 0.4))——rgb(... / ...)含 alpha，不能进color-mix()
最易被忽略的一点：色彩空间选错，color-mix() 的结果在浅色/深色背景下可能反向失衡。in oklch 是目前最稳的选择，但它不解决 fallback 是否足够接近的问题——这只能实测，不能靠语法正确就收工。
