不能用 system-color——该值不存在，浏览器会静默忽略；正确做法是使用 canvastext 等 css color level 4 定义的系统语义色关键字，配合 fallback 和 @media (forced-colors: active) 兜底，避免跨平台不一致与构建工具丢弃问题。
不能用 system-color —— 这个值根本不存在，浏览器会直接忽略它。你搜到的“system-color”大概率是把 system-ui（字体）和系统颜色关键字（如 CanvasText）混在一起了。
为什么 color: system-ui 无效？
system-ui 是 font-family 的取值，不是颜色。写成 color: system-ui 属于语法错误，所有浏览器都会静默丢弃该声明，开发者工具里这行会变灰划掉，但不报错。
- 正确用法：
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - 错误写法：
color: system-ui;（完全无效） - 想表达“系统默认文字色”，应优先考虑
CanvasText，而非虚构的system-color
CanvasText 和 ButtonFace 是什么？
它们是 CSS Color Level 4 定义的系统语义色关键字，代表操作系统 UI 的语义角色（如“主文本色”“窗口背景色”），不是固定 RGB 值。
-
CanvasText表示当前系统下的主文本色：浅色模式≈#333，深色模式≈#e0e0e0，高对比度模式下由系统提供合规色（如亮黄） -
ButtonFace表示按钮默认背景色，但跨平台差异极大：Windows 10 深色模式下可能是rgb(50, 50, 50)，macOS Sonoma 下却是rgb(240, 240, 240) - Firefox 截至 2026 年 5 月仍不支持这些关键字，但会安全降级为 UA 默认色（不是空白或崩溃）
- 构建工具（如 Lightning CSS）可能把未知系统色当无效值静默移除，CI 构建后样式消失却无提示
怎么安全使用系统颜色关键字？
不能裸写 color: CanvasText; 就完事。必须配合 fallback 和媒体查询兜底，否则在旧环境或高对比度模式下容易失控。
- 用
var()提供 fallback：color: var(--text, CanvasText);，并在 :root 中定义--text: #1a1a1a; - 高对比度模式必须显式处理：
@media (forced-colors: active) { color: ButtonText; background-color: ButtonFace; }（注意括号不能漏） - 别用
-webkit-text：这是已弃用的私有值，Chrome/Edge ≥115 不认，Firefox 完全无视 - 系统色只在
color、background-color、border-color中生效，不能用于box-shadow或filter
真正难的不是写出 color: CanvasText;，而是判断这个值是否真的承载了你想要的语义——它不响应 @media (prefers-color-scheme: dark)，也不保证在所有辅助功能场景下可用。现代项目里，更可控的做法是用自定义属性 + 媒体查询显式定义每种模式下的色值，仅在极少数装饰性图标等场景才透传系统色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
