color-mix() 仅支持混合两个不透明颜色，不处理透明度；需透明时应使用 rgba()、hsla() 或 color() 的 alpha 参数，且输入颜色不可含 alpha，色彩空间推荐 in oklch。
color-mix() 不是万能的透明度计算器
它根本不能直接算 rgba(0, 0, 0, 0.5) 这种“颜色 + 透明度”的组合——color-mix() 混合的是两种**已知不透明颜色**，结果也默认不透明。想靠它“把黑色变半透”，本质是错的路子。
常见错误现象：color-mix(in srgb, black 50%, white 50%) 看起来像灰色，但它是实心灰，不是“半透黑叠在背景上”的效果。视觉相似≠语义等价。
- 真正需要透明度时，优先用
hsla()、rgba()或color()的alpha参数（如color(srgb 0 0 0 / 0.5)） -
color-mix()的适用场景是：按比例混合两个具体色值，比如“按钮悬停色 = 主色 70% + 背景色 30%”，且两者都无 alpha - 它不接受带 alpha 的颜色作为输入项；若传入
rgba(255, 0, 0, 0.8)，浏览器会静默丢弃 alpha，只取 RGB 部分
color-mix() 的 color space 选错，结果会偏色
不同色彩空间对混合路径的定义不同：in srgb 是线性插值，in lch 更符合人眼感知（亮度、色相、色度分离），in oklch 是目前最推荐的——尤其做明暗渐变时。
例如想让深蓝过渡到浅蓝，用 in srgb 容易中间发灰或发紫；换成 in oklch，亮度平滑变化，色相稳定：
color-mix(in oklch, #0a4f8c 70%, #d0e6ff 30%)
- 不要硬记，默认写
in oklch；只有明确需要 sRGB 数学插值（比如和旧 CSS 值对齐）才换 -
oklch在 Chrome 111+、Safari 16.4+、Firefox 117+ 支持；若需兼容更老版本，得降级用lch或回退到srgb - 所有现代浏览器中，
color-mix()都不支持百分比以外的权重单位（不能写1fr或2）
透明度叠加必须靠层叠，不是靠 color-mix()
如果你的目标是“让文字在任意背景上都保持可读的半透感”，color-mix() 无法替代 background-blend-mode 或多层伪元素。它不处理 alpha 合成逻辑。
典型错误做法：试图用 color-mix(in srgb, currentColor 80%, transparent 20%) ——transparent 不是颜色，是关键字，不能参与 color-mix() 计算，这行会直接失效。
- 要模拟“半透遮罩”，用
background-color: color-mix(in oklch, #000 50%, #fff 50%)+opacity: 0.3组合（注意 opacity 影响整个元素） - 更精准控制：用
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(...) - 如果目标是文字本身带透明度，别绕弯，直接写
color: rgb(0 0 0 / 0.6)（新语法）或color: rgba(0,0,0,0.6)
color-mix() 和 calc() 搭配时，别指望动态算透明度
calc() 可以参与 color-mix() 的权重计算，比如 color-mix(in oklch, red calc(70% - 10%), blue calc(30% + 10%))，但它不能生成 alpha 值，也不能把一个数字变量转成透明通道。
例如这段无效：
/* 错误：alpha 不是 color-mix 的输出维度 */<br>color: color-mix(in srgb, black, white calc(var(--alpha) * 100%));
- 权重部分支持
calc()，但仅限于混合比例（0%–100%），不是颜色通道 - 想响应式调透明度？用
@property声明--alpha，再配合color: rgb(0 0 0 / var(--alpha)) - 所有主流浏览器中，
color-mix()都不支持嵌套函数调用，比如color-mix(..., hsl(...), ...)中的hsl()必须先求值为具体颜色字面量
实际项目里最容易被忽略的一点：你写的 color-mix(in oklch, ...) 在 Safari 16.4 之前完全不生效，而报错又极安静——连 DevTools 都不标红。上线前务必查 CanIUse 数据，别只信本地 Chrome。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
