transparent在linear-gradient中锚定为rgba(0,0,0,0)，导致与起始色插值时出现偏暗发灰等非预期过渡；应改用同色相rgba(start,0)实现真正可控的透明渐变。
transparent在linear-gradient里会锚定为rgba(0,0,0,0)
它不是“无色”，而是“预乘Alpha的纯黑+全透明”。浏览器渲染时，linear-gradient(to right, red, transparent) 实际插值路径是 red → rgba(0,0,0,0)，中间色会经过暗红、棕灰、近黑等非预期过渡，尤其在 Firefox 或旧 Safari 中更明显。
这不是 bug，是规范行为：transparent 在 CSS 颜色模型中语义固定为 black + alpha=0，不携带原始色相信息。
- 起始色是
#ff6b6b，终点用transparent→ 渐变中段偏暗发灰，像蒙了一层阴影 - 若父容器背景是浅灰或白色，末端看似“透明”，实则是黑底透出背景色，造成视觉污染
- Safari 15–16 对
transparent在多色标渐变中的插值支持不稳定，可能直接跳过中间计算
用同色相 rgba(start, 0) 替代 transparent 才能保色相
真正可控的“透明终点”，是把起点颜色的 alpha 降到 0，而非换一个语义无关的 transparent。比如红→透明，应写成 rgba(255, 107, 107, 1) → rgba(255, 107, 107, 0)。
- 避免硬切：加位置停顿，如
rgba(255, 107, 107, 0) 70%，让透明部分有缓冲区 - 变量友好：配合 CSS 自定义属性，
--accent-rgb: 255, 107, 107;，再写rgba(var(--accent-rgb), 0) - 深色模式安全：不会因
transparent锚定黑底而在暗背景下突兀发亮
transparent在渐变中不可靠的典型场景
某些上下文里，transparent 看似方便，实则埋坑：
-
mask-image: linear-gradient(to bottom, black, transparent)→ Retina 屏下末端残留灰影，因 luminance 转换浮点误差；改用rgba(0,0,0,0)更稳 -
background: linear-gradient(90deg, #ff6b6b, transparent 50%, #4ecdc4)→ Firefox 120 前会把transparent当纯黑参与插值，50% 处出现灰边 - 和
border混用做三角形时，border-top: 100px solid transparent与border-left: 100px solid #eee相交处抗锯齿插值失真，应统一为rgba(238,238,238,0)
什么时候还能放心用 transparent？
仅限两类场景：
- 单色标渐变蒙版，如
background-image: linear-gradient(to top, transparent, rgba(0,0,0,0.6))—— 起点明确为“无内容遮挡”，且无色相插值需求 - CSS 渐变规范强制要求的位置，如 Tailwind 的
from-transparent，底层依赖transparent作为合法色标关键字，此时不能替换成rgba()
只要涉及两个以上色标、需保持色相连贯、或运行在多浏览器混合环境，就别碰 transparent 做插值端点——它省下的那几个字符，迟早要花十倍时间调色偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
