rgb()加alpha是CSS Color Level 4标准扩展，支持rgb(255 0 0 / 0.5)新语法，要求空格分隔且斜杠后跟0–1小数alpha值；旧式rgb(255,0,0,0.5)无效，应使用rgba()或新rgb语法。
rgb() 函数加 alpha 是 CSS Color Level 4 的语法升级
不是“rgb() 突然支持了 alpha”，而是标准迭代后，rgb() 本身被扩展为可接受第四个参数（alpha）的函数。旧版只认 rgba()，新版允许 rgb(255 0 0 / 0.5) 这种写法——斜杠前是颜色分量，斜杠后是 alpha 值。
关键点在于：这个新语法和老 rgba() 并存，不是替代关系；浏览器按标准版本决定是否解析它。
- Chrome 99+、Firefox 95+、Safari 15.4+ 支持斜杠语法
rgb(255 0 0 / 0.5) - IE 完全不识别，连基本
rgb()空格分隔都报错 - 写成
rgb(255, 0, 0, 0.5)（逗号+四参数）是无效的：现代浏览器会拒收，旧浏览器更不会认
为什么不能用逗号分隔的 rgb(R,G,B,A)？
因为 CSS 规范明确将四参数逗号形式划归 rgba() 的专属语法。rgb() 在历史上只定义了三参数，强行塞第四个会导致解析失败。
常见错误现象：color: rgb(255, 0, 0, 0.5); 在所有主流浏览器中都会被忽略——控制台可能不报错，但样式根本不生效，回退到继承值或初始值。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确（新语法）：
color: rgb(255 0 0 / 0.5); - ✅ 正确（兼容写法）：
color: rgba(255, 0, 0, 0.5); - ❌ 无效（混淆语法）：
color: rgb(255, 0, 0, 0.5);
空格分隔 vs 斜杠分隔：两个必须同时满足的条件
新 rgb() 语法要求两个硬性条件缺一不可：参数之间用空格，alpha 必须跟在斜杠后面。漏掉斜杠或混用逗号，都会让整条声明失效。
比如 rgb(255 0 0 0.5) 看起来像新语法，但没有斜杠，浏览器当它是非法调用，直接丢弃；而 rgb(255, 0, 0 / 0.5) 混用逗号和斜杠，同样不认。
- 空格是分隔符，不是可选项——
rgb(255 0 0)和rgb(255,0,0)在新标准里地位不同：前者是 Level 4 推荐写法，后者是向后兼容的老式写法 - 斜杠是 alpha 的语法锚点，没有它，第四个数值就无从归属
- alpha 值仍必须是 0–1 小数，
/ 50%或/ 128都无效
实际项目中怎么选：rgba() 还是 rgb(... / ...)？
取决于你的兼容性底线和维护成本。如果要支持 IE 或旧版 Safari（rgba()；如果只面向现代浏览器，rgb(... / ...) 更统一，尤其配合 hsl(... / ...) 写主题变量时逻辑更干净。
但要注意：CSS 自定义属性不能直接存储带斜杠的函数字符串做过渡动画，仍得把 alpha 抽成独立变量再组合。
- 需要动画透明度变化 → 定义
--alpha: 0.3;，再写background-color: rgb(0 0 0 / var(--alpha));，然后只过渡--alpha - 要嵌套多个半透层 → 记住 alpha 是乘法叠加，
rgb(0 0 0 / 0.5)包裹rgb(255 0 0 / 0.4)实际红通道透出约 20%，不是简单相加 - 十六进制带 alpha（如
#80000080）和这种函数语法互不干扰，但渲染优先级一致，都是像素级混合
