transparent实际被解析为rgba(0,0,0,0)，导致插值路径不可控，产生偏暗、灰边或跳变；真正可控的透明起点应使用同色相rgba(r,g,b,0)，仅单色标蒙版或规范强制场景才可安全使用transparent。
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 中尤其明显：末端渐变区会浮出一层灰边；若父容器背景是浅灰或白色，“透明”末端实则是黑底透出背景，造成视觉污染。
多色标渐变中 transparent 引发灰边或跳变
写 linear-gradient(90deg, #ff6b6b, transparent 50%, #4ecdc4) 时，Firefox 120 之前会把 transparent 当纯黑参与三段插值，导致 50% 位置出现一道灰线；Safari 16.4+ 虽有改进，但旧版仍可能直接跳过中间计算。
- 错误根源：不同色标类型混用（
#ff6b6b是 sRGB，transparent是语义关键字，无色彩空间） - 正确写法应统一为 RGBA 空间：
rgba(255, 107, 107, 1), rgba(255, 107, 107, 0) 50%, rgba(78, 205, 196, 1) - 加位置停顿（如
rgba(255, 107, 107, 0) 70%）可避免硬切带来的跳变感
border 三角形交界处出现黑线的真正原因
用 border-top: 100px solid transparent 和 border-left: 100px solid #eee 做三角形时，交界处常有灰黑色细线——这不是抗锯齿 bug，而是 transparent 不提供颜色信息，浏览器找不到插值依据，只能用黑色补位。
解决方式很简单：
- 把
transparent换成rgba(238, 238, 238, 0)（与#eee同源） - 配合 CSS 变量更稳妥：
--bg: #eee; --bg-transparent: rgba(238, 238, 238, 0); - 旧 Android（X5 内核）必须禁用
transparent，否则直接渲染为黑块
transition 动画中 transparent 完全不插值
transition: background-color 0.3s; + background-color: transparent; 不会渐变，只会闪到目标色。因为 transparent 不属于任何颜色空间，浏览器拒绝做平滑插值。
要实现颜色+透明度联动过渡，必须保证起止状态同属 RGBA 空间：
- 错误：
background-color: #007bff; → background-color: transparent; - 正确：
background-color: rgba(0, 123, 255, 1); → background-color: rgba(0, 123, 255, 0); - 深色模式下也安全：不会因
transparent锚定黑底而在暗背景下突兀发亮
真正可控的“透明”，从来不是换一个词，而是明确写出带原始色相的 rgba(r,g,b,0)。只要涉及插值——无论是渐变、动画还是 border 交界——transparent 就是隐性黑底开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
