var(--color)无效时整条声明被丢弃，取继承值或初始值；回退值仅在变量未声明或为unset时生效，非法值不触发回退。
不是“回退到上一个有效值”，而是整条 CSS 声明被浏览器直接丢弃，最终取该属性的**继承值或初始值**——这常被误认为是“回退”，其实是解析失败后的默认行为。
var(--color) 无效时为什么看起来像“回退”了
当 var(--color) 的值本身非法（比如 --color: 12; 缺单位、--color: "red"; 多余引号），浏览器不会报错，但会把整个声明（如 color: var(--color);）标记为 invalid 并跳过。此时该元素的 color 取决于：是否继承父级、是否被其他选择器覆盖、或使用规范定义的初始值（如 color 初始值是 canvastext，通常表现为黑色）。
- 开发者工具里该行会被划掉（strikethrough），悬停提示 “invalid value”，不是 “variable is undefined”
-
var(--color, #333)的回退值在此类场景下不生效，因为变量已定义，只是值非法 - 若想触发回退，得让变量真正未声明，或显式设为
unset
rgba() / oklch() 等函数无效时为何整条声明消失
旧版或不支持的浏览器对新颜色函数（如 rgba()、oklch()）的处理是：静默忽略整条声明，而非降级渲染。例如：
button {
background-color: #4a6fa5;
background-color: rgba(74, 111, 165, 0.8);
}
IE8 会跳过第二行，只保留第一行；但如果你只写第二行，背景就完全失效——不是变透明，而是取父容器背景或默认透明，文字可能糊成一片。
- 必须在同一选择器内、连续声明，且兼容值在前
-
@supports (color: oklch(0 0 0))不可靠：返回false无法区分是语法错还是函数不支持 - Safari 17.3+ 才开始支持
oklch()，此前版本会整条丢弃，不触发任何 fallback 逻辑
rgb() 里混用数字和百分比为何不报错却没效果
rgb(255, 50%, 0) 这种写法浏览器解析失败，但不会抛错，只会把整条 color 声明划掉。原因很直接：CSS 规范要求三个参数必须统一类型——全用 0–255 整数，或全用 0%–100% 百分比。
- 混用导致解析器卡住，不进入计算阶段，更不会尝试“就近取整”或“自动转换”
- 调试时看 DevTools 中该属性是否被划掉，是最快速的判断方式
- 百分比换算口诀：100% = 255，50% ≈ 128，20% ≈ 51，1% ≈ 2.55（向下取整为 2 或 3）
真正容易被忽略的是：所谓“回退”几乎从不发生在运行时动态校验环节，而是在声明解析阶段就被截断。你看到的颜色，大概率不是“降级结果”，而是浏览器按层叠规则选中的另一个声明，或是继承/初始值——别依赖视觉猜测，先查 DevTools 里的划掉项和提示文本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
