rgb旧语法用逗号分隔，ie9+及旧移动浏览器全支持，要求参数严格、alpha须为小数；新语法用空格加斜杠，仅chrome93+/firefox95+/safari15.4+支持，单位需统一，兼容性断层明显。
rgb() 旧语法：逗号分隔，全浏览器无压力
旧式 rgb(255, 0, 0) 和 rgba(255, 0, 0, 0.5) 是 IE9+ 全系支持的铁律写法，连 Android 4.4 WebView、iOS 7 Safari 都能稳稳解析。它要求：逗号必须存在、逗号后可有可无空格（但 Chrome 6–12 会因空格报错）、alpha 必须是小数（0.5 合法，50% 直接失效）。
常见错误现象：
-
rgb(255, 0, 0, 0.5)—— 多了一个参数，整条声明被静默丢弃（rgb()最多 3 个参数，4 参数只属于rgba()） -
rgba(255, 0, 0, .5)—— 少了前导零，IE8 及部分旧 Android WebView 会拒绝解析 -
rgb(255 ,0 ,0)—— Chrome 6–12 报错，空格紧贴逗号触发解析失败
rgb() 新语法：空格 + 斜杠，现代浏览器才认
CSS Color Level 4 引入的 rgb(255 0 0) 和 rgb(255 0 0 / 0.5) 写法更紧凑，但支持范围窄得多：Chrome 93+、Firefox 95+、Safari 15.4+ 才真正可用。Safari 15.2 及更早版本遇到 / 就当非法字符处理，整条规则失效。
使用场景中容易踩的坑：
-
rgb(100% 0% 0%)✅ 合法；rgb(100%, 0%, 0%)❌ 逗号写法下百分比不被识别，整条丢弃 -
rgb(255 0 0 / 50%)✅ 支持；rgb(255 0 0 / .5)✅；但混写rgb(100% 0 0 / .5)❌ —— R/G/B 单位必须统一（全数值或全百分比） -
rgb(255 0 0 / none)语法合法，但实际意义极小，别在生产环境依赖它
rgba() 还要不要用？其实它已成 rgb() 的别名
Level 4 规范明确将 rgba() 定义为 rgb() 的完全等价写法：rgba(255 0 0)、rgba(255, 0, 0, 0.5)、rgb(255 0 0 / 0.5) 渲染结果一致。这意味着你不必再纠结“该用哪个函数”。
但要注意兼容性断层：
- 仍需支持 Safari ≤15.3 或 Firefox ≤94？继续用
rgba(255, 0, 0, 0.5)，别碰斜杠 - 项目已锁死 Chrome ≥95 + Safari ≥15.4？可统一迁移到
rgb(255 0 0 / 0.5)，删掉冗余的a -
rgba()在渐变里曾有 iOS 12 渲染黑块问题，新语法rgb(... / ...)同样不免疫，遇到linear-gradient还得 fallback 到transparent或#RRGGBBAA
百分比通道和 alpha 混用时的隐性陷阱
rgb(100% 0% 0% / 0.5) 看似自然，但它的百分比不是“颜色混合比例”，而是 0%→0、100%→255 的硬映射。1% ≈ 2.55，浏览器四舍五入取整，rgb(1% 1% 1%) 实际渲染为 rgb(3 3 3)，不是视觉上“极淡的灰”。
性能与维护提示：
- HEX（如
#FF5733）体积最小、解析最快，静态色首选；RGB 百分比写法反而增加解析开销 - JS 动态改色时，
getComputedStyle返回的永远是rgb()或rgba()格式，不是百分比——别指望用rgb(100% 0% 0%)来简化 JS 计算 - 在 CSS 自定义属性中写
--c: rgb(100% 0% 0% / 0.5)，老 Android WebView 可能直接忽略整条声明，fallback 必须显式提供
@supports 安全检测。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
