CSS Color Level 4正式标准采用空格分隔语法，逗号语法仅为向后兼容的旧写法；新项目必须使用rgb(255 0 0)及rgb(255 0 0 / 0.5)等空格+斜杠格式，否则在自定义属性、alpha控制、构建工具链中易出错。
逗号语法是旧规范遗留写法，空格语法才是CSS Color Level 4正式标准；新项目必须用空格，否则在自定义属性、alpha控制、构建工具链中容易出错。
rgb(255, 0, 0) 和 rgb(255 0 0) 的兼容性差异
两者目前都能被 Chrome 93+、Firefox 95+、Safari 15.4+ 解析，但底层行为不同：
-
rgb(255, 0, 0)走的是 legacy parser fallback 路径，仅保证向后兼容 -
rgb(255 0 0)是规范定义的 primary syntax，解析更稳定、语义更清晰 - 旧写法无法用于新颜色空间（如
oklab(0.5 0.2 -0.1)或display-p3(1 0 0)），这些函数**完全不支持逗号** - VS Code、WebStorm 等编辑器对空格语法提供更准确的颜色预览和 lint 提示
加 alpha 时为什么必须用斜杠而不是逗号
rgb(255, 0, 0, 0.5) 是非法语法，浏览器会静默丢弃整条声明；rgb(255 0 0 / 0.5) 才是唯一合法写法：
- 逗号分隔的
rgba()是独立函数，而现代rgb()已统一支持 alpha，不再需要单独函数名 -
/是 alpha 参数的强制前缀，不是可选符号——写成rgb(255 0 0 0.5)会被忽略第四个值 - alpha 支持小数（
0.5）或百分比（50%），但不能混用单位，如rgb(255 0 0 / 0.5%)无效 - 斜杠后必须有值，
rgb(255 0 0 / )会导致解析失败，尤其在 Sass 变量插值中要 guard$a是否为空
百分比写法下逗号与空格的生死线
rgb(100%, 50%, 0%) 看似合理，实则整条规则被浏览器静默丢弃；只有 rgb(100% 50% 0%) 才合法：
立即学习“前端免费学习笔记（深入）”；
- 百分比值只在空格语法中被识别，逗号语法下所有百分比都被当作非法 token 处理
- 混用单位（如
rgb(255 50% 0)）同样无效，三个参数必须同为整数或同为百分比 - 空格语法允许连续空格或全角空格，但在旧版 Safari（≤15.3）中可能触发解析异常，建议用单个半角空格
- PostCSS 插件（如
postcss-color-function）若版本低于 6.x，会把空格语法错误转回逗号，导致线上样式失效
团队协作中最容易被忽略的隐性风险
真正麻烦的不是语法本身，而是混合使用带来的不可见偏差：
- 有人手写
rgb(255, 0, 0)，有人用设计系统输出rgb(255 0 0 / 0.8)，CSS 压缩器（如 cssnano）可能统一转成逗号或删空格，最终颜色变深/变浅 - 深色模式下，alpha 值微小误差（如
/ .5被误写为/ .49）会导致文字对比度不达标，WCAG 检测失败 - 自定义属性中插值
--color: rgb(var(--r) var(--g) var(--b) / var(--a))在部分 Android WebView 中不稳定，必须确保--a有默认值
