color-mix() 不支持 transparent，需用带 alpha 的 rgb()/hsl()（如 rgb(255 255 255 / 0.15)）混合实现悬停提亮微透效果，并通过 background-color 声明顺序做兼容降级，禁用 opacity 过渡以保障色彩逻辑。
color-mix() 不支持直接混合透明度，得靠 background-color + CSS 变量控制
直接对 background-color: color-mix(in srgb, var(--primary), transparent) 写悬停是无效的——color-mix() 本身不接受 transparent 作为颜色参数，会报错或退化为默认色。真正可行的路径是：用 CSS 变量存基础色（如 --btn-bg: #007bff），再通过 color-mix() 混合该色与白色/黑色+alpha通道色（比如 rgb(255 255 255 / 0.1)），最后统一套在 background-color 上。
关键点在于：透明效果不是靠“混合透明”，而是靠“混合带 alpha 的半透色”。浏览器目前只支持在 color-mix() 中使用带 / alpha 的 rgb() 或 hsl()，不能用 transparent 或十六进制带 alpha（如 #00000080）。
按钮悬停时用 color-mix(in srgb, --btn-bg, white) + alpha 控制明暗和通透感
想让蓝色按钮悬停变亮且略透，不能只混 white（那会过曝），得加 alpha 控制参与混合的白的“分量”。实际生效的是：color-mix(in srgb, var(--btn-bg), rgb(255 255 255 / 0.15)) —— 这里 rgb(255 255 255 / 0.15) 是一个极淡的白，它和主色按比例混合后，既提亮又保留底色饱和度，视觉上像罩了层薄纱。
-
color-mix()的第二个参数权重默认是 50%，若要更柔和，可显式写成color-mix(in srgb, var(--btn-bg) 70%, rgb(255 255 255 / 0.15) 30%) - 深色主题下换成
rgb(0 0 0 / 0.1)混合，避免发灰 - 务必声明
background-clip: padding-box，否则圆角按钮悬停时可能漏出父容器背景
兼容性兜底必须用 background-color: rgba() 回退
目前只有 Chrome 111+、Safari 16.4+、Firefox 119+ 原生支持 color-mix()。没支持的浏览器会忽略整条 background-color 声明，导致悬停后背景消失。必须用 CSS 顺序覆盖做降级：
button {
--btn-bg: #007bff;
background-color: var(--btn-bg);
}
button:hover {
background-color: rgba(255, 255, 255, 0.15); /* 兜底：纯白叠浅透明 */
background-color: color-mix(in srgb, var(--btn-bg), rgb(255 255 255 / 0.15));
}
注意：两个 background-color 声明写在同一选择器内，后写的会覆盖前写的；旧浏览器跳过第二行，执行第一行；新浏览器执行第二行，第一行被自然忽略。
别忘了禁用 transition 的 opacity，它会破坏 color-mix 的色彩逻辑
如果给按钮加了 transition: opacity .2s，悬停时整个元素变透明，底层内容会透出来，这和我们想要的“按钮自身颜色变浅变透”完全不是一回事。color-mix() 控制的是颜色本身的明度与通道，不是图层叠加。所以：
- 删掉所有针对
opacity的过渡 - 只对
background-color做过渡：transition: background-color .2s ease - 若需轻微缩放或阴影变化，单独加
transform或box-shadow，不要动 opacity
最易被忽略的一点：color-mix() 的结果是离散颜色值，过渡是否平滑取决于浏览器对混合色插值的支持程度——Chrome 当前做得最好，Firefox 在深色混合时偶有阶跃感，测试时一定要真机看效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
