CSS Color Level 4 规范已将 rgb() 的逗号语法明确定义为过时（obsolete），仅保留向后兼容；现代标准语法为 rgb(255 0 0 / 0.5)，空格分隔参数、斜杠引入命名 alpha 参数，新颜色空间如 oklab() 完全不支持逗号写法。

rgb() 不再强制用逗号，不是浏览器“懒得支持”，而是 CSS Color Level 4 规范**主动废除了逗号语法的规范地位**——它被明确定义为 过时（obsolete），仅保留向后兼容。

逗号语法已被规范标记为 obsolete，不是“还能用所以就留着”

规范里写得清楚：rgb(255, 0, 0) 不再是“标准写法”，而是 legacy fallback。浏览器解析器遇到它，会走降级路径处理，而不是按主流程解析。这意味着：

• 新颜色空间（如 oklab()、display-p3()）**根本不支持逗号写法**，写了直接无效
• 和 CSS 自定义属性组合时风险陡增：rgb(var(--r), var(--g), var(--b)) 在 Safari 17.4 和部分 PostCSS 版本中解析不稳定，甚至静默失败
• rgb(255, 0, 0, 0.5) 这种写法在规范里**非法**——逗号版不接受第四个 alpha 参数，必须用斜杠语法 rgb(255 0 0 / 0.5)

空格 + 斜杠才是现代语法的结构基础

把 rgb(255 0 0 / 0.5) 拆开看：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 255 0 0 是三个独立参数，空格是**函数调用级分隔符**（类似 JS 中 fn(a, b, c) 的逗号，但这里换成了空格）
• / 0.5 是命名参数（named parameter），斜杠是**强制前缀**，不可省略、不可替换为逗号或等号
• 这种结构让 alpha 可选、单位可混搭（如 rgb(100% 0% 0% / 0.5)）、且能自然扩展到新颜色空间

实际迁移中最容易翻车的三件事

不是语法难，而是旧习惯和工具链没跟上：

• 手写 hsl(240 100% 50%) 忘加斜杠，后续加透明度变成 hsl(240 100% 50% 0.5) → 第四个值被忽略，alpha 失效
• Sass 插值写成 rgb(#{$r}, #{$g}, #{$b})，结果输出逗号版；正确写法是 rgb(#{$r} #{$g} #{$b})（空格分隔）
• PostCSS 插件未升级到 v6+，比如 postcss-color-function 旧版会把空格语法转回逗号，压缩后变成 rgb(255 0 0) → 少空格，Safari 直接不认

真正麻烦的从来不是写错一行颜色，而是不同人、不同工具、不同构建阶段混用两种语法，最终上线的颜色在深色模式下偏灰、在高对比度设置里发白——这类问题不会报错，只会在用户截图发来时才暴露。