color-mix() 仅线性混合两种纯色并输出固定RGB值，不感知背景；实现悬停遮罩需用带alpha的rgb()/hsl()作混合色、前置fallback值、设置background-clip: padding-box。
color-mix() 不是遮罩，它不读取背景色
直接用 color-mix() 实现“悬停遮罩叠加”是常见误解。它不会像 mix-blend-mode 那样把元素颜色和底层背景实时混合，也不感知父容器或兄弟元素的颜色——它只做两个纯色值的线性插值，输出一个新 RGB 值。你写 color-mix(in srgb, #007bff, rgba(255 255 255 / 0.15))，结果永远是固定的浅蓝灰，和按钮底下有没有图片、渐变、深色主题完全无关。
想模拟遮罩效果，得靠 background-color + alpha 色混合
真正能达成“悬停时像盖了层半透白纱”的视觉，路径只有一条：用带 alpha 的 rgb() 或 hsl() 作为混合色，而不是 transparent。因为 color-mix() 明确不支持 transparent 作为参数，写了会静默失败或退化为默认色。
-
color-mix(in srgb, var(--btn-bg), rgb(255 255 255 / 0.15))✅ 可行：极淡白参与混合，提亮且保饱和度 -
color-mix(in srgb, var(--btn-bg), transparent)❌ 无效：浏览器忽略整条声明，悬停后背景可能消失 -
color-mix(in srgb, var(--btn-bg), #ffffff80)❌ 不支持：十六进制带 alpha 写法在 color-mix 中不被识别
必须前置 fallback，且顺序不能错
Chrome 111+、Safari 16.4+、Firefox 119+ 支持 color-mix()；旧版 Firefox（118 及更早）和多数旧 Edge 完全不支持，会跳过整条 background-color 声明。如果你只写一行 background-color: color-mix(...)，这些浏览器里按钮悬停就变成透明或继承父背景。
正确写法是利用 CSS 层叠机制，把降级值写在前面：
立即学习“前端免费学习笔记（深入）”；
button:hover {
background-color: rgba(0, 123, 255, 0.9);
background-color: color-mix(in srgb, var(--btn-bg), rgb(255 255 255 / 0.15));
}
旧浏览器执行第一行，新浏览器覆盖为第二行。漏掉第一行，就是线上事故。
别碰 opacity，也别忘 background-clip
用 opacity 过渡看似简单，但它会让整个按钮（文字、边框、图标）一起变透明，可读性直接崩坏。真正的透明感来自颜色混合本身，不是元素整体淡化。
另一个容易被跳过的点：background-clip: padding-box。圆角按钮如果没设这个，悬停时 color-mix() 生成的新背景色可能在圆角边缘外溢，露出父容器背景，破坏“遮罩”感。
真正难的不是写对那一行 color-mix()，而是确保它在所有浏览器里都不失效、不穿帮、不误伤文字——这要求你同时控制好 fallback 顺序、alpha 色写法、剪裁行为，三者缺一不可。
