不建议使用 transparent。它被解析为 rgba(0,0,0,0)，导致灰黑过渡、动画跳变、交界黑线等问题；正确做法是统一用同色系 rgba() 或 hsla() 实现透明渐变。
不建议。在 CSS 渐变中插值到透明色时，transparent 不是推荐选择——它会导致不可控的灰黑过渡、动画跳变、三角形交界黑线等问题。
linear-gradient 中 transparent 实际被解析为 rgba(0,0,0,0)
浏览器不是把 transparent 当作“无色”，而是按规范强制映射为预乘 Alpha 的纯黑：rgba(0, 0, 0, 0)。这意味着：
-
linear-gradient(to right, #ff6b6b, transparent)的插值路径是#ff6b6b → rgba(0,0,0,0)，中间必然经过暗红、棕灰、近黑等非预期色阶 - Firefox 和 Safari 15–16 中尤为明显：末端渐变区浮出灰边；若父容器背景是浅灰或白色，“透明”末端实则是黑底透出背景
- 这不是 bug，是 CSS 颜色模型规范行为——
transparent是语义关键字，不参与颜色插值
transition 动画里用 transparent 就是硬切
transition: background-color 0.3s 搭配 background-color: transparent 不会渐变，只会“闪”到目标色：
- 因为
transparent不属于任何色彩空间，而#007bff是 sRGB 值，类型不匹配，浏览器拒绝插值 - 正确写法必须统一空间：起点
rgba(0, 123, 255, 1)→ 终点rgba(0, 123, 255, 0) - 若起点是 CSS 变量（如
--primary-rgb: 0, 123, 255），终点应写成rgba(var(--primary-rgb), 0)
border 三角形交界处黑线的根源
用 border-top: 100px solid transparent 和 border-left: 100px solid #eee 画三角形时，交界处出现灰黑色细线：
- 这不是抗锯齿 bug，而是
transparent不提供颜色信息，浏览器找不到插值依据，只能用黑色补位 - 解决方式是把
transparent换成同源rgba()：比如rgba(238, 238, 238, 0)（即#eee的 alpha=0 版本） - 更稳妥的是用 CSS 变量统一管理：
--bg: #eee; --bg-transparent: rgba(238, 238, 238, 0);
真正安全使用 transparent 的场景极少：仅限单色标蒙版类渐变（如 linear-gradient(to top, transparent, rgba(0,0,0,0.6))），且该起点明确为“无内容遮挡”，不涉及色相插值。其余所有需要颜色过渡、动画、多色标或与其他色值共存的场合，都该用同色系的 rgba() 或 hsla() 替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
