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 是整个元素的渲染透明度。
- 给文字用
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()回退
rgba() 当 alpha，或者在 JS 里对 hsl 的 h 值做累加却不归一——这两处没报错，但颜色会偏得莫名其妙。 
