rgb()不支持透明度，必须用rgba()（alpha限0–1小数）或现代/语法（如rgb(255 0 0 / 0.5)或rgb(255 0 0 / 50%)）。
不能直接用百分比定义 rgb() 的透明度——rgb() 本身不接受第四个参数，写成 rgb(255, 0, 0, 50%) 会整条失效，浏览器静默丢弃，不报错也不提示。
rgb() + / 语法：alpha 支持小数或百分比（现代写法）
现代 CSS（Chrome 111+、Firefox 112+、Safari 16.4+ 等已全面支持）允许在 rgb() 后用 / 分隔 alpha 值，且 alpha 可以是小数（0.5）或百分比（50%）：
-
rgb(255 0 0 / 0.5)✅ 半透明红色 -
rgb(255 0 0 / 50%)✅ 等价写法，语义更直观 -
rgb(255, 0, 0 / 0.5)❌ 逗号与/混用，解析失败 -
rgb(255 0 0 / 50)❌ 整数 50 超出范围，无效（必须是0–1小数或0%–100%）
注意：/ 语法要求空格分隔颜色值，不能用逗号；百分比单位 % 必须紧贴数字，不可写成 50 % 或 50% 中间有空格。
rgba() 不支持百分比 alpha，只认小数
如果你还在用 rgba()，它的第四个参数（alpha）**严格限定为 0–1 的小数**，不是百分比，也不是整数：
-
rgba(255, 0, 0, 0.5)✅ 正确 -
rgba(255, 0, 0, 50%)❌ 无效，整条声明被忽略 -
rgba(255, 0, 0, 50)❌ 同样无效，alpha > 1
这个限制常被误记为“支持百分比”，但规范和所有主流引擎都只接受小数。旧项目若需兼容 IE 或某些 WebView，仍得用 rgba() + 小数，不能迁移到百分比写法。
为什么 / 语法更安全？容易踩的坑在哪
/ 语法本质是 rgb() 函数的扩展形式，它复用了原函数名，避免了从 rgb() 切换到 rgba() 时漏改函数名的风险。但它有三个关键约束：
- 仅适用于
rgb()和hsl()，不支持hwb()或lab() - 不兼容 IE 和 Android 4.4 以下 WebView；上线前需确认目标环境
- 数值校验更宽松：比如
rgb(256 0 0 / 0.5)中的256会被截断为255，而rgba(256, 0, 0, 0.5)也会同样处理——但两者都**不会报错**，容易掩盖输入错误
真正难调试的，是那些静默失效的写法：比如多打一个逗号、混用空格与逗号、alpha 写成 0.5px 或带单位，浏览器一律跳过整条规则，开发者工具里连“已禁用”都不显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
