rgba()和hsla()的alpha参数必须为0–1小数，非百分比或整数；如rgba(255,0,0,0.5)和hsla(200,50%,60%,0.3)正确，而rgba(255,0,0,50%)或hsla(200,50%,60%,50%)无效，浏览器将忽略整条声明。
rgba() 和 hsla() 的 alpha 参数必须是 0–1 小数，不是百分比
很多人写 rgba(255, 0, 0, 50) 或 hsla(200, 50%, 60%, 50%)，结果透明度没生效——浏览器直接忽略这个值，回退到不透明黑色。alpha 是浮点数，只接受 0.0 到 1.0 范围。
-
rgba(255, 0, 0, 0.5)✅ 半透明红色 -
hsla(200, 50%, 60%, 0.3)✅ 色相 200、饱和度 50%、明度 60%、30% 不透明 -
rgba(255, 0, 0, 50%)❌ 无效语法，现代浏览器会丢弃整条声明
注意：#ff000080 这类带 alpha 的十六进制写法是 CSS Color Level 4 标准，Chrome 103+、Firefox 110+ 支持，但 IE 完全不认，旧版 Safari（
alpha 通道 vs opacity：影响范围完全不同
opacity: 0.5 会让整个元素（包括子元素、文字、边框）一起变透明；而 rgba() 或 hsla() 中的 alpha 只作用于那个颜色本身，比如只让背景半透，文字依然清晰可见。
- 用
background-color: rgba(0, 0, 0, 0.2)→ 背景灰黑半透，文字颜色不受影响 - 用
opacity: 0.2→ 整个容器及其所有子节点都变成 20% 不透明，可读性可能崩坏 - 嵌套透明时，alpha 会相乘：
parent { background: rgba(0,0,0,0.5); }+child { background: rgba(255,0,0,0.5); }→ 实际叠加效果接近rgba(128,0,0,0.25)
老浏览器兼容要双写，别只靠 rgba()
IE9 及更早版本不支持 rgba()，但 IE8–IE9 支持专有滤镜 filter: alpha(opacity=50)（注意：这里数值是 0–100，不是 0–1）。
- 安全写法示例：
div { background-color: rgba(0, 0, 0, 0.4); filter: alpha(opacity=40); /* 仅 IE8–9 生效 */ } -
filter会触发重排，性能略差，且只对块级元素可靠；现代项目若已放弃 IE，可直接删掉 - Safari 13.1 之前不支持斜杠语法
rgb(0 0 0 / 0.4)，必须用逗号分隔的四参数形式
hsla() 调色比 rgba() 更直观，但明度单位容易错
用 hsla() 动态改深色模式时，只需调 l（明度）和 a（alpha），色相和饱和度不动；而 rgba() 要分别算 R/G/B 通道值，容易偏色。
- 明度
l必须带%，如hsla(0, 0%, 10%, 0.8)✅；hsla(0, 0%, 10, 0.8)❌（10 被当 10%，但语义模糊，部分解析器报错） - 色相
h单位可省略（200等价于200deg），但建议显式写deg避免歧义 - alpha =
0时颜色完全不可见，但仍占据布局空间，点击事件默认仍响应——需要加pointer-events: none才真正“消失”
实际项目里最容易被忽略的是 alpha 的复合行为：多个透明层叠加时不是“叠加透明”，而是按公式 final_alpha = 1 − (1−a₁) × (1−a₂) 计算，视觉上比预期更透。调试时建议用 DevTools 的颜色拾取器实时验证最终渲染色值，而不是只看代码里的 alpha 数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
