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)
rgba()。 
