rgb(255 0 0 / 0.4) 必须满足：空格分隔三值、禁用逗号、/后紧接小数或百分比（如0.4或40%）、alpha为0或1时仍需保留/结构；hsl明度必须带%，alpha不支持纯整数。
现代浏览器（Chrome 111+、Firefox 109+、Safari 16.4+、Edge 111+）已原生支持无逗号的 rgb() 和 hsl() 语法，透明度用 / 分隔，无需 polyfill 或前缀——但写错一个空格或标点，整条声明就静默失效。
rgb(255 0 0 / 0.4) 这种写法必须满足哪些格式条件？
这不是“差不多能用”的语法，而是 CSS 解析器严格校验的结构：
-
rgb()和hsl()内部必须用**空格分隔**颜色值，禁止逗号；rgb(255, 0, 0 / 0.4)❌ 整条被忽略 -
/前后可有可无空格，但/后必须紧跟 alpha 值（小数如0.4或百分比如40%），不能带单位以外的字符 - HSL 的明度（Lightness）**必须带
%单位**：hsl(0 100% 50% / 0.6)✅；hsl(0 100% 50 / 0.6)❌（解析失败） - alpha 值为
0或1时仍需保留/结构：rgb(255 0 0 / 0)✅，不是rgb(255 0 0)+ 单独 opacity
为什么 hsl(240 100% 50% / 50%) 是合法的，但 rgb(255 0 0 / 50) 不行？
alpha 值支持两种写法：小数（0.5）和百分比（50%），但不支持纯整数（50）——后者会被当作无效 token 丢弃。
-
rgb(255 0 0 / 50%)✅ 等价于/ 0.5，语义清晰且不易错 -
rgb(255 0 0 / 50)❌ 缺少%，浏览器不识别，整条 color 声明失效 - 百分比写法对设计师更友好，也避免了小数点精度争议（比如
0.333333333vs33.333%）
#RRGGBBAA 八位 HEX 和 rgb() / 语法混用时要注意什么？
两者都是无前缀原生语法，但行为完全不同：八位 HEX 是单个颜色字面量，rgb() 是函数调用。混用 fallback 时顺序和兼容性必须手动控制。
- 八位 HEX 必须**全小写、8 字符、无空格无引号**：
#ff6b6b80✅；#FF6B6B80❌（部分 Android WebView 拒绝）；"#ff6b6b80"❌（当字符串处理） - 它不提供函数式计算能力，无法像
rgb()那样嵌套calc()或变量；color: rgb(var(--r) var(--g) var(--b) / var(--a))✅，但color: #{$r}{$g}{$b}{$a}❌（预处理器除外） - 要兼容 IE 或旧 Safari，必须显式写两遍，且
rgba()在前：color: rgba(255, 0, 0, 0.4); color: rgb(255 0 0 / 0.4);——旧引擎跳过第二行，新引擎优先用第二行
真正容易被忽略的是 alpha 值的语义：它始终表示**不透明度**，不是“透明度”。写 / 0.5 就是 50% 不透明，对应八位 HEX 的 7f，不是 80。手抖多打一个空格、少写一个 %、大小写混用，都不会报错，只会让颜色“消失”——你得盯着 DevTools 的 computed 面板确认最终生效的 color 值，而不是只看 styles 面板有没有划掉线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
