因为CSS Color Level 4规范将逗号语法标记为过时，rgb(255, 0, 0)仅靠向后兼容勉强可用，而带alpha的rgb(255, 0, 0, 0.4)直接非法；新语法强制空格分隔+斜杠分隔alpha（如rgb(255 0 0 / 0.4)），且斜杠不可省略、alpha须带单位或小数前导零，否则解析失败导致color值为空。
rgb() 里为什么不能留逗号
现代 CSS（Color Level 4）已将逗号标记为“过时语法”，不是浏览器懒得删，而是规范明确不鼓励。rgb(255, 0, 0) 还能用，纯属向后兼容；但一旦加 alpha，rgb(255, 0, 0, 0.4) 就是非法语法，整条声明会被浏览器静默丢弃——devtools 的 computed 面板里 color 值会直接为空。
空格分隔 + 斜杠写法必须满足的硬性条件
这不是“差不多就行”的格式，CSS 解析器会逐字符校验：
-
rgb()内部三个值之间**只能用空格**，不能有逗号、换行或全角空格 - 斜杠
/是 alpha 通道的强制前缀，**不可省略**，也不能替换成逗号或等号 - alpha 值必须是小数（如
0.4）或带%的百分比（如40%），50（无单位）是无效 token - HSL 类函数中，明度（L）和饱和度（S）**必须带单位**：
hsl(0 100% 50% / 0.6)✅，hsl(0 100% 50 / 0.6)❌
和 rgba() 混用或替换时的实际差异
表面上 rgb(255 0 0 / 0.4) 和 rgba(255, 0, 0, 0.4) 效果一样，但底层行为不同：
-
rgba()是独立函数，只支持 RGB + alpha；rgb()加/是原函数扩展，语义仍是“RGB 颜色”，只是带透明通道 - 所有现代颜色函数（
hsl()、oklab()、lch()）都统一用/写法，切换空间时不用改结构 - 在 CSS 自定义属性中拼接更安全：
color: rgb(var(--r) var(--g) var(--b) / var(--a));✅；而rgba(var(--r), var(--g), var(--b), var(--a))在部分旧版 PostCSS 中可能被错误解析或剔除
构建工具和团队协作中最容易忽略的静默失效点
语法本身简单，但实际落地时最麻烦的是“不报错却没效果”：
- Sass/Less 插值中漏传
$a变量，生成rgb(255 0 0 / )→ 解析失败 - 压缩工具把空格转成制表符或连续空格，某些旧版 Safari 会拒绝解析
- 有人手写
rgb(255, 0, 0)，有人用工具输出rgb(255 0 0)，混在一起后压缩器再一处理，线上颜色突然变深或变透明 - alpha 用小数时省略了前导零（如
.4），虽合法，但和40%并不等价——前者是 40%，后者也是 40%，但团队若约定用百分比，就别混用，否则 diff 里看不出区别，排查困难
真正要盯住的，是 devtools 里 computed 样式中的 color 值是否为空；只要它空了，八成是斜杠前后少了个空格、漏了 %、或多打了一个逗号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
