rgba()的alpha值必须为0–1的小数，填0.5表示50%不透明度；hsla()的alpha更易控制主题色透明度；opacity作用于整个元素且会级联叠加，与rgba()本质不同。
rgba() 的 alpha 值填 0.5 就是“半透明”，不是 50
很多人写 rgba(255, 0, 0, 50) 或 rgba(255, 0, 0, 50%)，结果颜色完全不透明——浏览器直接丢弃整条声明，回退到黑色。因为 rgba() 第四个参数（alpha）只接受 0 到 1 之间的数字，不是百分比，也不是整数。
-
alpha = 0.5表示该颜色有 50% 不透明度（即 50% 透明），叠在白色背景上会得到中间灰，不是简单“变淡” -
alpha = 0是完全透明（看不见，但依然占布局空间、默认仍响应点击） -
alpha = 1等价于rgb(255, 0, 0)或#ff0000，无性能差异 - 小数位数不影响渲染：
0.7和0.700效果一致，但推荐写0.7更简洁
rgba() 和 opacity 的透明行为根本不同
这是最常引发 UI bug 的混淆点：两者都调“透明”，但作用对象和副作用完全不同。
-
rgba()只影响你写的那个颜色值（比如background-color或color），子元素、边框、文字完全不受影响 -
opacity: 0.5会让整个元素及其所有子节点一起变透明，还可能意外创建新的层叠上下文（z-index 行为改变） - 如果只想让背景半透而文字保持清晰，必须用
background-color: rgba(...)，不能靠opacity - 多个透明层嵌套时，
opacity会级联叠加（父 0.5 × 子 0.5 = 0.25），而rgba()只作用于单个颜色，不会复合
hsla() 的 alpha 更适合主题色动态控制
如果你在维护一套主题色，或者要做渐变过渡，hsla() 比 rgba() 更直观可控——因为 alpha 和色调、明度解耦了。
-
hsla(200, 70%, 50%, 0.4)中的0.4仅控制这个颜色的透光程度，不改变色相或饱和度 - 配合 CSS 自定义属性，可以只改 alpha 值批量调整所有同色系组件的透明度，不用反复换算 RGB
- 写渐变时，
linear-gradient(to bottom, hsla(120, 100%, 50%, 0), hsla(120, 100%, 50%, 0.8))能保证色相一致、仅透明度变化，比混搭不同 RGB 值更可靠 - iOS Safari 对
alpha = 0的渐变偶有闪烁，可临时改用0.01规避
兼容旧 IE 的 fallback 很少需要写了
IE8 及更早版本确实不支持 rgba()，但如今全球主流浏览器对 rgba()、hsla() 和标准 opacity 的支持率已超 96%，连 IE11 都支持 rgba()。
- 除非明确要兼容 IE8–IE9，否则不必再写
filter: alpha(opacity=50)或-moz-opacity: 0.5 - 真要兼容，优先 fallback 到不透明色（如
background-color: #000），而不是靠滤镜硬撑 -
#ff000080这种 8 位十六进制写法是 CSS Color Level 4 扩展，Safari 15.4+ 和 Chrome 94+ 支持，但 IE 完全不认，别当通用方案用
hsla(0, 0%, 20%, 0.3) 可能比 hsla(0, 100%, 80%, 0.3) 更易读；大面积半透色叠加后的真实对比度，得用工具实测，不能靠肉眼估。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
