css color level 4 新增 rgb(255 0 0 / 0.5) 等斜杠语法，rgba() 和 hsla() 未被废弃，仅成历史别名；二者渲染、性能、混合逻辑完全一致，仅语法和 alpha 取值范围不同。
不是“CSS4不再强制要求rgba()”，而是 CSS Color Level 4 引入了新语法：在 rgb() 和 hsl() 中支持斜杠分隔的 alpha 参数，从而让 rgba() 和 hsla() 成为历史别名——但它们依然完全有效，也从未被废弃。
rgb(255 0 0 / 0.5) 和 rgba(255, 0, 0, 0.5) 是等价的
浏览器解析时，rgb(255 0 0 / 0.5) 和 rgba(255, 0, 0, 0.5) 渲染结果完全一致，混合逻辑、预乘行为、性能表现都无差别。区别只在写法：
-
rgb()新语法必须用空格分隔 R/G/B，斜杠后跟 alpha（可为小数或百分比，如/ 50%） -
rgba()仍用逗号分隔四参数，alpha 仅接受 0–1 小数（0.5✅，50%❌） - 旧浏览器（Chrome
自定义属性中用 rgb(var(--color)) 会出问题
当你把带 alpha 的颜色存进 CSS 变量，比如：
--color: 255, 144, 106, 0.18;
再写 background: rgb(var(--color));，就踩坑了：
-
rgb()函数只认前三个参数，第四个（alpha）被规范定义为“无效值”，应被丢弃 - 但部分浏览器（尤其是 Chrome）会降级解析为
rgba()行为，导致意外半透明 - 这不是标准行为，而是实现差异，不可依赖
- 正确做法是：要么改用
rgba(var(--color))，要么拆成独立变量：--r: 255; --g: 144; --b: 106; --a: 0.18;，再组合rgb(var(--r) var(--g) var(--b) / var(--a))
hsl() 斜杠语法对主题系统更友好
在深色模式切换、动态主题等场景下，hsl(240 100% 50% / 0.8) 比 hsla(240, 100%, 50%, 0.8) 更利于维护：
- 明度（
50%）和 alpha（/ 0.8）语义分离，调整“深浅”和“透不透”互不干扰 - 配合 CSS 自定义属性拼接更自然：
--bg: hsl(var(--hue) var(--sat) var(--light) / var(--alpha)); - 旧写法
hsla()无法这样解耦，因为所有参数挤在逗号列表里，没法单独覆盖某一项 - 注意：饱和度和明度必须带
%，写成hsl(240 100 50 / 0.8)会被当作无效值（100和50缺单位）
真正容易被忽略的点是：斜杠语法不是“替代”旧函数，而是新增一种表达维度的方式；你仍然得为兼容性保留 rgba() 或做降级处理，不能指望所有项目都能直接切过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
