color-mix() 完全不支持 alpha 通道，仅接受不透明颜色字面量（如 #ff0000、red、lch(50% 80 20)），传入 rgba()/hsla() 会导致无效声明或静默忽略；需预烘焙透明叠加结果再输入，动态 alpha 混合应改用 background-blend-mode、mix-blend-mode 或 opacity。
color-mix() 完全忽略 Alpha 通道，它只处理不透明的颜色值；传入 rgba() 或 hsla() 会静默失败或被降级为纯色，无法实现带透明度的混合效果。
color-mix() 遇到 rgba() 会直接报错或跳过
浏览器解析 color-mix() 时，只接受能明确转为 RGB/LCH/OKLCH 坐标系的**不透明颜色字面量**。一旦你写 color-mix(in srgb, rgba(255, 0, 0, 0.5), blue)，结果不是“半透红混蓝”，而是整个声明被标记为 Invalid property value（Chrome）或直接静默忽略（Safari）。Firefox 更干脆：即使开启实验标志，也拒绝解析含 alpha 的输入。
- 常见错误现象：控制台没报错但颜色没变——其实是浏览器跳过了整条声明，回退到前一个有效
color值 - rgba()、hsla()、
currentcolor、CSS 变量都不能作为color-mix()的参数，必须是#ff0000、red、lch(50% 80 20)这类无 alpha 的形式 - 哪怕你用
color: rgba(255, 0, 0, 0.5); color: color-mix(in srgb, #f00, #00f);，第二行也不会“继承”第一行的 alpha——它独立计算，输出仍是不透明色
想模拟“带透明度的混合”，得先手动拍平再喂给 color-mix()
如果你已知底层背景色（比如固定 #1e1e1e）和上层半透色（比如 rgba(59, 130, 246, 0.2)），可以离线算出叠加后的最终像素色，再把这个纯色值塞进 color-mix()：
- 用公式
result = fg × α + bg × (1 − α)手动计算：例如rgba(59, 130, 246, 0.2)盖在#1e1e1e上，结果接近#3a5c8c - 把这个结果色（如
#3a5c8c）和另一个基础色（如#007bff）一起传给color-mix(in srgb, #3a5c8c 70%, #007bff 30%) - 注意：这不是实时混合，而是“预烘焙”——背景一变，整个链路就失效
真正需要 Alpha 参与的混合，请绕开 color-mix() 用其他机制
要让透明度参与渲染时的动态混合，color-mix() 不是工具，而是干扰项。正确路径是：
- 用
background-blend-mode: overlay或multiply实现多背景层的 alpha 混合（支持rgba()背景） - 用
mix-blend-mode: screen让元素内容与背后已渲染内容（包括兄弟元素、父背景）按 alpha 实时合成 - 用
opacity控制整层衰减（注意嵌套乘积效应），或用单层rgba()替代多层堆叠（避免1−(1−α)²偏差）
最容易被忽略的是：你写的每一处 color-mix() 都必须是「确定颜色 + 明确权重 + 指定空间」三者齐全，且 alpha 必须为 1 —— 它从不读取、不输出、不理解透明度这回事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
