transparent 在 linear-gradient 中不会变黑，但因默认锚定为 rgba(0,0,0,0)，与起始色插值易偏暗发灰；应改用同色相 rgba(start,0)实现真正透明渐变。
linear-gradient 里用 transparent 会变成全黑？
不会变黑，但很可能看起来像黑——因为 transparent 本质是rgba(0, 0, 0, 0)，和背景叠加后若父容器没设背景色，就会透出 body 默认的白色或灰色，造成“颜色消失”或“意外发灰”的错觉。
-
transparent不是“透明色”，而是“完全透明的黑色”，它不携带任何色相 / 饱和度信息 - 想保留某个颜色的渐变过渡，又让某一段透明，必须显式写成
rgba(255, 100, 50, 0)这类带原始色值的半透形式 - 浏览器解析
linear-gradient(to right, red, transparent)时，会把transparent锚定到黑 +alpha=0，再和 red 做线性插值，中间色往往偏暗、发棕
怎么让红色渐变到“真正透明”而不发灰
关键不是换词，是换写法：用同一色相下 alpha 从 1 降到 0，而不是混入transparent。
- 错误写法：
background: linear-gradient(to right, red, transparent) - 正确写法：
background: linear-gradient(to right, red, rgba(255, 0, 0, 0)) - 更稳妥（适配深色模式）：
background: linear-gradient(to right, red, rgba(255, 0, 0, 0) 70%)，加个位置停顿，避免末端硬切 - 如果起始色是变量，记得用
color-mix()或 CSS 自定义属性计算 rgba，别直接拼transparent
多个色标中混用 transparent 的兼容性坑
Chrome 117+ 和 Safari 16.4+ 支持 transparent 在多标中自然插值，但 Firefox 直到 120 仍会把 transparent 当作纯黑参与计算，导致渐变断裂或色偏。
- 实测问题代码：
linear-gradient(90deg, #ff6b6b, transparent 50%, #4ecdc4)→ Firefox 里 50% 处会出现一道灰边 - 绕过方案：全用 rgba，例如
rgba(255, 107, 107, 1), rgba(255, 107, 107, 0) 50%, rgba(78, 205, 196, 1) - 注意 Safari 对
rgba(……, 0)的渲染有时比 Chrome 更“通透”，若需像素级一致，建议加will-change: background微调合成行为
用 transparent 做遮罩层时的实际效果偏差
当把 linear-gradient 当遮罩（mask-image）用，比如盖在图片上做淡入，transparent的位置未必“完全透”，尤其在 Retina 屏或开启 subpixel 抗锯齿时。
立即学习 “ 前端免费学习笔记（深入）”；
- 现象：
mask-image: linear-gradient(to bottom, black, transparent)→ 图片底部仍有极细微灰影 - 根因：mask 通道值被转为 luminance，
transparent映射为 0 亮度，但浮点计算残留导致非绝对 0 - 解决：改用
mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0))，并确保容器mask-mode: luminance显式声明 - 额外提醒：mask 模式下，
transparent在部分安卓 WebView 里直接失效，必须 fallback 为rgba(0,0,0,0)
实际写的时候，别信“写 transparent 就完事了”——它在 gradient 里不是语义透明，而是一个有默认基色的 alpha 占位符。真正可控的，永远是那个你亲手写的rgba()。
