hsla()的alpha值必须是0–1小数而非百分比，如hsla(200, 50%, 60%, 0.4)有效，hsla(200, 50%, 60%, 40%)无效；alpha=0时元素仍占布局空间且可响应事件。
HTML里用hsla()写透明色，alpha值不是百分比而是0–1小数
直接写hsla(200, 50%, 60%, 0.4)就能得到带40%不透明度的蓝灰色，不是hsla(200, 50%, 60%, 40%)——后者会失效，浏览器当无效值处理，回退到默认色或透明黑。
alpha参数必须是0到1之间的十进制数：0完全透明，1完全不透明，0.0和0等价，1.0和1也等价。
- 别用百分号，
hsla(0, 0%, 100%, 50%)❌ 会解析失败 - 整数也可以，
hsla(0, 0%, 100%, 0)✅ 完全透明（相当于transparent） - 小数位数不限，
hsla(120, 100%, 50%, 0.75)和hsla(120, 100%, 50%, .75)效果一样
hsla()和rgba()在透明表现上没区别，但HSLA调色更直观
两者最终都转成RGBA渲染，底层行为一致。区别在于人眼调节逻辑：hsla()的h（色相）是角度值（0–360），s（饱和度）和l（亮度）用百分比，比RGB的三个0–255数值更容易预测颜色倾向。
比如想微调一个按钮的悬停态：原色hsla(210, 80%, 50%, 0.9)，只需把l提到60%就变亮，把s降到60%就变灰，不用像RGB那样试错算三通道。
立即学习“前端免费学习笔记（深入）”；
- 改亮度不影响色相，
hsla(0, 100%, 30%, 0.8)→hsla(0, 100%, 70%, 0.8)是从暗红到亮红 - 改饱和度不偏色，
hsla(120, 100%, 50%, 0.8)→hsla(120, 30%, 50%, 0.8)是从鲜绿变灰绿 - alpha独立控制透光量，和H/S/L互不干扰
常见错误：CSS变量里传hsla()要防字符串拼接出错
如果用CSS自定义属性存HSLA值，别把alpha单独抽成变量再拼——CSS不支持运行时函数调用，hsla(var(--h), var(--s), var(--l), var(--a))这种写法在大多数浏览器里会整体失效。
正确做法是把整个hsla()字符串存进一个变量，或者用JS动态设置（此时可安全拼接）。
:root {
--btn-bg: hsla(200, 60%, 50%, 0.8);
}
.button {
background-color: var(--btn-bg);
}
- ❌ 错误：把alpha拆出来，
--a: 0.3然后hsla(200, 60%, 50%, var(--a))—— 大部分浏览器不认 - ✅ 正确：整个值存为一个变量，或用
color-mix()（新标准，兼容性有限）做混合 - ⚠️ 注意：Sass/Less等预处理器能拼，但那是编译期行为，和纯CSS运行时无关
alpha=0时元素仍占布局空间，和display: none本质不同
hsla(0, 0%, 0%, 0)或hsla(180, 0%, 100%, 0)渲染结果都是完全透明，但该元素依然响应事件、参与盒模型计算、影响父容器高度——它只是“看不见”，不是“不存在”。
如果目标是彻底移除视觉与交互影响，得配合其他声明：
- 仅隐藏视觉：用
opacity: 0（支持过渡动画）或hsla(..., 0) - 隐藏视觉+禁用交互：加
pointer-events: none - 完全脱离文档流：改用
display: none（无过渡，布局重排）或visibility: hidden（保留空间）
alpha参数本身只管颜色通道的合成权重，不触发任何布局或事件层面的变化。
