rgb()空格分隔语法是现代css颜色解析唯一推荐路径，必须用单个半角空格分隔三通道，alpha需用/引入；百分比是0%–100%到0–255的线性映射，非混合比例，且须与空格语法绑定使用。
rgb() 空格分隔语法不是“换种写法”，而是现代 CSS 颜色解析的**唯一推荐路径**。浏览器已默认启用 CSS Color Level 4 解析器，旧逗号写法仅靠 fallback 支持，新项目必须用空格。
rgb() 空格语法的基本写法
核心就一条：三个参数之间用**单个半角空格**分隔，alpha 通道（如有）必须用 / 引入，不能加逗号，也不能省略斜杠。
-
rgb(255 0 0)✅ 合法，纯红 -
rgb(100% 50% 0%)✅ 合法，等价于rgb(255 128 0) -
rgb(255 0 0 / 0.4)✅ 合法，50% 透明度 -
rgb(100% 0% 0% / 50%)✅ 合法，注意0%的%不能丢 -
rgb(255, 0, 0)❌ 不推荐，属 legacy fallback，构建/压缩后易失效 -
rgb(255 0 0 0.4)❌ 错误，第四个值被忽略，无 alpha 效果 -
rgb(255 0 0 /)❌ 缺 alpha 值，解析失败
百分比单位在 rgb() 中的坑
百分比不是“颜色混合比例”，而是 0%–100% → 0–255 的线性映射，且必须和空格语法绑定使用。
-
rgb(25% 50% 75%)→ 实际是rgb(64 128 191)（向下取整），不是“25%红+50%绿+75%蓝”的视觉混合 -
rgb(100%, 0%, 0%)❌ 逗号写法下百分比不被识别，整条声明静默丢弃 - 通道单位必须统一：
rgb(100% 0% 0%)✅，rgb(255 0% 0)❌（混用单位，部分引擎拒绝解析） - 全角空格、连续空格或环绕空格（如
rgb(255 0 0)）在 Safari 17.4 及更早版本中可能触发异常
alpha 通道必须用 / 而不是逗号
/ 是语法结构的一部分，不是装饰符号。它把 alpha 明确标记为“命名参数”，和前面三通道解耦。
-
rgb(255 0 0 / 0.5)✅ 正确 -
rgb(255 0 0 / 50%)✅ 支持百分比，和小数等价 -
rgb(255 0 0, 0.5)❌ 逗号 + 空格混用，非法 -
rgb(255 0 0 / .5)✅ 允许省略前导零，但.5和0.5行为一致 -
rgb(255 0 0 / none)✅none是规范定义的 alpha 关键字，等价于0
构建工具与预处理器适配要点
很多 Sass/Less 默认输出逗号语法，PostCSS 插件若未升级，会把空格转回逗号——这种错误不会报错，只会在深色模式或高对比度下暴露颜色偏差。
- Sass 中避免
rgb(#{$r}, #{$g}, #{$b})，改用插值空格：rgb(#{$r} #{$g} #{$b})或rgb(#{$r} #{$g} #{$b} / #{$a}) - 检查 PostCSS 插件版本：如
postcss-color-function必须 ≥ 6.x 才支持 Level 4 语法 - CI/CD 加检测命令：
grep -r "rgb([^)]*,[^)]*)" src/，发现即阻断 - 不要全局替换逗号为空格——
rgb( 255 , 0 , 0 )是合法 legacy 写法，盲目替换会破坏空格数量规则
rgb()，而是团队里有人手写逗号、有人依赖构建输出空格、压缩器再抹掉空格——最终线上渲染出错，却没有任何控制台报错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
