rgba()和hsla()未被废除，而是CSS Color Level 4新增斜杠语法（如rgb(255 0 0 / 0.5)）以解耦alpha通道；旧写法在所有现代浏览器中仍完全有效，仅旧版Safari/Firefox/Chrome需兼容时必须使用rgba()/hsla()。
rgba() 和 hsla() 为什么能被 rgb() / hsl() 替代
因为 CSS Color Module Level 4 把 alpha 通道从独立函数里“解耦”出来了，不是废除旧写法，而是给 rgb() 和 hsl() 增加了可选的斜杠语法。浏览器内部仍按 RGBA/HSLA 模型处理，只是解析规则变了。
旧写法：rgba(255, 0, 0, 0.5)、hsla(0, 100%, 50%, 0.5)
新写法：rgb(255 0 0 / 0.5)、hsl(0 100% 50% / 0.5)
- 斜杠后支持小数（
/ 0.5）或百分比（/ 50%），语义更统一 - 空格替代逗号，视觉上更紧凑，也减少手误（比如多打一个逗号导致整个声明失效）
- 旧函数名没被废弃，
rgba()和hsla()在所有现代浏览器中依然完全有效
什么时候必须用 rgba() / hsla() 而不是新语法
当项目需兼容 Safari ≤ 15.3、Firefox ≤ 94 或 Chrome ≤ 92 时，rgb(0 0 0 / 0.5) 会直接被忽略——这些旧版本压根不识别斜杠分隔语法，连 fallback 都不会触发，而是整条声明作废。
- Safari 15.4+（2022 年 3 月起）、Chrome 93+（2021 年 9 月起）、Firefox 95+（2021 年 12 月起）才开始支持新语法
- 若你用的是 Next.js、Vite 等现代工具链，默认目标浏览器通常已覆盖新语法，但团队里有人还在用 macOS Monterey + Safari 15.2，就得留一手
- CI/CD 中的自动化截图测试若跑在旧版 WebDriver 上，也可能因不识别新语法而报错
rgb() 和 hsl() 新语法的参数陷阱
新语法看似自由，但对空格、数值类型和顺序更敏感——它不像旧函数那样有容错逗号分隔逻辑。
-
rgb(255, 0, 0 / 0.5)❌ 错误：逗号混用空格，解析失败 -
rgb(255 0 0 / 50%)✅ 正确：空格分隔 RGB，斜杠后跟百分比 -
hsl(240 100% 50% / 0.8)✅ 正确：H 是数字，S/L 必须带 %，alpha 可小数可百分比 -
hsl(240 100 50 / 0.8)❌ 错误：S/L 缺少 % 单位，会被当作无效值
透明度混合行为没变，但写法影响可维护性
无论用哪种写法，alpha 值参与的颜色混合逻辑完全一致：它始终是预乘 alpha（premultiplied alpha），即先按透明度缩放 R/G/B 分量，再与背景叠加。变化的只是你怎么写，不是怎么算。
立即学习“前端免费学习笔记（深入）”；
- 用
rgb(0 0 0 / 0.5)写遮罩层，比rgba(0, 0, 0, 0.5)更易一眼看出 alpha 是独立维度 - 配合 CSS 自定义属性时，新语法更利于动态拼接：
--bg: hsl(var(--hue) var(--sat) var(--light) / var(--alpha));——旧写法无法这样拆解 - 但注意：
transparent仍是特殊关键字，它等价于rgba(0,0,0,0)，但在某些边界场景（如 SVGfill或 Canvas 绘图上下文）行为更稳定
L 值本质——调高 L 依然不是线性提亮，尤其在高饱和色下，hsl(0 100% 90% / 0.8) 看起来可能比 hsl(0 100% 70% / 0.8) 更灰，而不是更亮。 
