color-mix() 在表格斑马纹中不可直接使用，仅支持 chrome 111+ 和 safari 16.4+，且不能在 tr:nth-child(even) 等选择器中动态调用，必须预计算颜色并配合 fallback 值使用。
Color-mix() 在表格斑马纹中不直接可用
color-mix() 是 CSS Color Level 4 的新函数，目前仅在 Chrome 111+ 和 Safari 16.4+ 中部分支持，且 不支持在 tr:nth-child(even) 这类选择器中动态混合颜色。你写 background-color: color-mix(in srgb, #f0f0f0 70%, #ffffff 30%) 看似合理，但实际会触发解析失败或静默回退——浏览器要么忽略整条声明，要么报 Invalid property value 错误。
真正能稳定落地的方案，是用它做「配色预计算」：手动算出两个相邻行的背景色，再用传统 CSS 选中器应用。
用 color-mix() 预生成两套斑马色值
假设基础色是 #eef2ff（浅蓝底），你想让它和白色混合出柔和过渡。可以这样写：
/* 在 :root 或 style 标签里预定义 */
:root {
--row-bg-light: #ffffff;
--row-bg-dark: color-mix(in srgb, #eef2ff 85%, #ffffff 15%);
}
注意三点：
-
color-mix()必须写在支持它的浏览器里，否则变量值为空 → 整个--row-bg-dark无效 → 后续background-color: var(--row-bg-dark)回退为透明 - 推荐用
in srgb而非in lch，后者虽更均匀但兼容性更差，且对斑马纹这种简单对比无需色貌精确 - 百分比加起来必须是 100%，写成
#eef2ff 85%, white 15%比#eef2ff, white更安全，避免某些引擎解析歧义
表格中正确绑定斑马纹样式
别依赖 tr:nth-child(odd) 直接调用 color-mix()，而是把预计算好的变量注入到静态规则里：
table tr:nth-child(odd) {
background-color: var(--row-bg-light, #ffffff);
}
table tr:nth-child(even) {
background-color: var(--row-bg-dark, #f8f9ff);
}
关键点：
-
var(--row-bg-dark, #f8f9ff)的 fallback 值必须是手动画出来的近似色（比如用 DevTools 调出color-mix()输出结果后复制），不能留空或写transparent - 如果表格有
thead，要排除它：tbody tr:nth-child(odd)，否则表头行也会被染色 - IE 和旧版 Firefox 完全不识别
color-mix()，所以 fallback 不是可选项，是必填项
替代方案：用 HSL 调整亮度更稳妥
如果目标浏览器包含大量 Edge 90–105 或 Firefox 102 以下版本，color-mix() 就不该出现在生产 CSS 里。这时改用 HSL 是最稳的：
/* 基础色转 HSL 后微调 lightness */
--base-hsl: 210 100% 95%;
table tr:nth-child(even) {
background-color: hsl(210, 100%, 93%); /* 降 2% 亮度 */
}
优势明显：
- HSL 所有现代浏览器都支持，包括 IE9+
- 亮度（lightness）调整直观：±2%~5% 就足够形成视觉区分，又不会过重
- 不用管混合空间、插值模型这些复杂概念，调试成本低
真正麻烦的不是怎么写 color-mix()，而是判断你的用户是否真能看见它生效——查 Can I Use 数据时，得看「你实际覆盖的用户设备」，不是看「最新 Chrome 版本」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
