rgb()新语法必须用空格分隔且支持斜杠alpha，逗号写法强制降级为旧解析、不支持百分比和透明度；如rgb(100% 50% 0%)合法，等价于rgb(255 128 0)，而rgb(100%, 50%, 0%)无效并被静默丢弃。
rgb() 新语法必须用空格，逗号会导致整条规则失效
浏览器对 rgb() 的新旧语法区分非常严格：只要用了逗号，哪怕数值完全正确，也**强制降级为旧式解析**——此时百分比会被直接忽略，alpha 参数不被识别，整条声明可能静默丢弃。比如 rgb(100%, 50%, 0%) 在所有现代浏览器中都无效，连控制台都不会报错，只是背景或文字“突然没颜色”。
真正生效的新语法只有一种结构：rgb(r g b) 或 rgb(r g b / a)，中间全是空格，斜杠前后也必须有空格。
-
rgb(255 128 0)✅ 合法，纯橙色 -
rgb(100% 50% 0%)✅ 合法，等价于rgb(255 128 0) -
rgb(255 0 0 / 0.6)✅ 合法，60% 不透明的红色 -
rgb(255, 0, 0)❌ 旧语法，仍可用但不支持百分比和/ a写法 -
rgb(255 0 0 0.6)❌ 缺少斜杠，第四个值被忽略，渲染为不透明红色
百分比写法不是“混合比例”，而是数值映射
写 rgb(25% 50% 75%) 并不表示“四分之一红 + 一半绿 + 四分之三蓝”的视觉混合效果，它只是把百分比线性映射到 0–255 区间：25% → 64（不是 63.75，向下取整），50% → 128，75% → 191，最终等效于 rgb(64 128 191) —— 一个偏蓝灰的调子。这点常被误读，尤其在从设计稿换算时容易出偏差。
如果你需要按设计系统里的“饱和度/明度比例”调色，别依赖百分比，改用 hsl() 或 JavaScript 动态计算更稳妥。
- 百分比单位只能用于新语法（空格分隔）
- 混用单位如
rgb(255 50% 0)❌ 无效，整条丢弃 - 百分比值会向下取整，
1%=2，0.5%=0（被截断）
透明度必须用斜杠分隔，不能靠位置判断
新语法里，alpha 不再是第四个参数，而是跟在斜杠后面的一个独立值：rgb(r g b / a)。浏览器不会数参数个数来决定是否启用透明度——它只认斜杠。所以 rgb(255 0 0 0.5) 和 rgb(255 0 0 / 0.5) 是本质不同的两条规则。
这个斜杠写法还统一了所有颜色函数的行为：hsl(0 100% 50% / 0.5)、lab(50% 20 30 / 0.8) 都遵循同一套规则，方便未来扩展。
-
rgb(255 0 0 / 50%)✅ 合法，alpha支持百分比写法（50%=0.5） -
rgb(255 0 0 / 0.5)✅ 推荐，小数更直观 -
rgb(255 0 0 / 0)✅ 完全透明，注意此时元素仍占布局空间 -
rgb(255 0 0 / -0.1)❌ 无效，alpha超出 0–1 范围即整条失效
兼容性底线：Chrome 93+、Firefox 95+、Safari 15.4+ 才完整支持
如果你的项目还要支持 IE、Edge 18 或 Safari 15.3 及更早版本，rgb(r g b / a) 和 rgb(100% 50% 0%) 这类写法会直接不渲染。这时候不能简单加个 fallback，因为旧引擎连“不认识的语法”都会整条丢弃，不会退回到前一个声明。
稳妥做法是：用 CSS 变量封装新语法，再用 @supports 做条件加载；或者老老实实用逗号分隔 + 十六进制 fallback。
-
@supports (color: rgb(0 0 0 / 0)) { .box { color: rgb(255 0 0 / 0.7); } }✅ 安全兜底 - 避免在同一个选择器里混写新旧语法，如
color: rgb(255,0,0); color: rgb(255 0 0 / 0.7);❌ 后者在旧浏览器中被忽略，但前者仍生效，容易掩盖问题 - 构建工具（如 PostCSS）可自动补全兼容写法，但需确认其是否识别斜杠语法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
