transition中#fff→rgba(0,0,0,0.1)会出黑边，因浏览器将无alpha的hex补为rgba(255,255,255,1)，再四通道线性插值，R/G/B从255→0、A从1→0.1，中间产生大量灰黑色阶；正确做法是起止均用rgba()确保同色彩空间插值。
transition中用#fff → rgba(0,0,0,0.1)会出黑边？
不是“黑边”，是浏览器在插值时把 #fff（即 rgb(255,255,255)）和 rgba(0,0,0,0.1) 当作两个不同色彩模型处理：前者无 alpha 通道，后者有。浏览器会先将 #fff 补全为 rgba(255,255,255,1)，再线性插值 R/G/B/A 四个值——但 A 从 1→0.1，R/G/B 同时从 255→0，中间必然经过大量灰黑混合色，视觉上就是“发灰→发黑→透出底色”，尤其在浅色背景上特别明显。
为什么不能混用 hex 和 rgba 做 color / background-color 过渡
浏览器对 color、background-color 等属性做过渡插值时，必须全程在同一个色彩空间内运算。一旦源头格式不一致：
-
#ffffff和rgba(255,255,255,0.9)表面看都是“白+透明”，但解析后一个是三通道，一个是四通道 -
white是命名色，等价于rgb(255,255,255)，同样缺失 alpha，和 rgba 不兼容 - 哪怕只改一个值的写法（比如 hover 里写成
rgba(0,0,0,0)），整个插值链就断裂，退化为跳变或异常中间帧
正确做法：统一用 rgba()，且显式声明 alpha 通道
要过渡带透明度的颜色，rgba() 是唯一稳妥选择。关键点：
- 起始和结束都用
rgba(r,g,b,a)，确保 R/G/B/A 四个数值都能被独立、线性插值 - 避免用
opacity替代 alpha：它会让整个元素（含文字、子节点）一起变透明，无法单独控制背景 - 示例对比：
/* ❌ 错误：hex + opacity 组合，子元素被压暗，且插值不连贯 */
.card {
background-color: #ffffff;
opacity: 0.9;
transition: opacity 0.3s;
}
<p>/<em> ✅ 正确：起止都用 rgba，alpha 单独变化，背景过渡干净 </em>/
.card {
background-color: rgba(255, 255, 255, 0.9);
transition: background-color 0.3s;
}
.card:hover {
background-color: rgba(0, 0, 0, 0.1);
}额外注意：HSLA 比 RGBA 更适合色调渐变
如果过渡涉及色相变化（比如蓝→橙），hsla() 比 rgba() 更自然，因为 H（色相）是环形值，插值不会经过脏色区。但要注意：
立即学习“前端免费学习笔记（深入）”；
- H 必须用
deg单位（如hsla(210, 70%, 60%, 0.9)），不能省略单位 - S 和 L 必须用
%单位，写成小数（如0.7）会被忽略 - 所有状态都得用
hsla()，不能混hsl()（无 alpha）和hsla()
真正容易被忽略的是：哪怕你只在一个伪类里改了一种写法，整个过渡链就失效了。不是浏览器 bug，是规范行为——插值必须同构，没商量余地。
