rgba()的alpha值必须为0–1的小数，如0.5；hsla()的hue超出360会自动取模；rgba()/hsla()设颜色透明度，opacity影响整个元素；IE8不支持hsla()且无降级。

rgba() 里 alpha 值写成 0.5 还是 50%？

浏览器只认小数，不认百分比。写 rgba(255, 0, 0, 50%) 会直接失效，解析为透明黑或 fallback 颜色——这不是兼容性问题，是语法错误。

• alpha 参数必须是 0–1 之间的数字（含 0 和 1），0.5 正确，50% 错误
• 常见误写来源：把 CSS 其他属性（如 opacity）的百分比习惯带进了 rgba()
• 如果从设计稿拿到“50% 透明度”，得手动换算：50% → 0.5，80% → 0.8

hsla() 的 hue 值超出 360 会怎样？

不会报错，但会自动取模。写 hsla(400, 70%, 60%, 0.8) 等价于 hsla(40, 70%, 60%, 0.8)，因为 400 % 360 = 40。

• 这在动态计算颜色时容易埋坑：比如用 JS 每次加 30 度做轮播色，不重置 hue 就可能绕圈后颜色突变
• 多数编辑器和 DevTools 显示时会自动归一化为 0–360 范围，但原始值仍参与计算
• 想确保可读性，建议在生成逻辑里主动 % 360 并修正负值（如 (hue % 360 + 360) % 360）

rgba() 和 hsla() 在 opacity 层叠时表现不同？

本质一样，但叠加行为取决于你用在哪。关键区别不在函数本身，而在「作用域」：rgba() 和 hsla() 设置的是颜色的固有透明度，而 opacity 是整个元素的渲染透明度。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 给文字用 color: rgba(0,0,0,0.3)，只有字变半透；用 opacity: 0.3，连文字阴影、子元素都会一起变淡
• 背景渐变中混用 rgba() 色标和 hsla() 色标完全没问题，浏览器统一转为 RGB 计算插值
• 性能无差异，但过度嵌套半透元素（尤其带 blur 或 backdrop-filter）时，用 rgba()/ hsla() 比全局 opacity 更可控

IE 对 hsla() 的支持到底卡在哪？

IE9+ 支持 hsla()，但 IE8 及更早版本完全不识别，且不会 fallback 到紧邻的上一个声明——它会跳过整条规则。

立即学习“前端免费学习笔记（深入）”；

• 写 color: #333; color: hsla(200, 100%, 50%, 0.7);，IE8 直接忽略第二句，最终用 #333；这看似 OK，但若第一句也是 hsla() 就全挂了
• 真正危险的是 CSS 预处理器自动插入的 hsla()（比如 Sass 的 transparentize($blue, 0.3)），没配降级会静默失效
• 现代项目基本不用管 IE8，但如果维护老系统，建议用 Autoprefixer 配合 ie: 9 目标，它不会处理 hsla()，得手动补 rgb() 回退

实际用的时候，最常翻车的是把设计工具里的“透明度 60%”原样塞进 rgba() 当 alpha，或者在 JS 里对 hsl 的 h 值做累加却不归一——这两处没报错，但颜色会偏得莫名其妙。