transparent 是语义关键字而非颜色值，不参与RGB计算，与rgba(0,0,0,0)视觉一致但类型不同；transition中无法线性插值导致跳变，Safari下还影响触摸热区和渐变路径，应统一用同源rgba()替代。
transparent 是语义关键字，不是颜色值
它不携带任何 RGB 信息，浏览器将其解释为“此处不参与颜色计算”，而非“画一个黑+全透明的像素”。rgba(0,0,0,0) 则是明确的预乘 Alpha 颜色值：RGB 各通道被 alpha 缩放为 (0,0,0)，Alpha 为 0。两者视觉一致，但底层类型不同——前者是抽象状态，后者是具体色值。
transition 动画中 transparent 会跳变
浏览器无法在 rgb(255,0,0) 和 transparent 之间做线性插值，因为后者没有色相、饱和度或亮度可参与运算。结果常是硬切（jump-cut），尤其在 Safari 和旧版 Chrome 中明显。
- 正确写法：
background-color: rgba(255,0,0,1)→background-color: rgba(255,0,0,0) - 错误写法：
background-color: red→background-color: transparent - 若起点色由 CSS 变量控制（如
--primary-rgb: 255,0,0），终点应写成rgba(var(--primary-rgb), 0)，确保色相一致
Safari 下 transparent 可能丢失触摸热区
border: 1px solid transparent 在 Safari 中常不响应点击，outline: 1px solid transparent 热区极弱。原因在于 Safari 将 transparent 解释为“无绘制意图”，直接跳过交互区域计算。
- 替代方案：
border: 1px solid rgba(0,0,0,0.001)（0.001是实测最小有效 alpha） - 低于该值（如
0.0001）可能被渲染器优化剔除 - 搭配
backdrop-filter的容器也建议避免background-color: transparent，改用rgba(0,0,0,0.001)
linear-gradient 中 transparent 实际锚定为 rgba(0,0,0,0)
规范允许 transparent 作为渐变色标，但多数浏览器（Firefox、Safari 15–16）内部将其映射为 rgba(0,0,0,0)，导致插值路径不可控：例如 linear-gradient(to right, #ff6b6b, transparent) 实际走的是 #ff6b6b → rgba(0,0,0,0)，中间出现暗红、棕灰甚至灰边。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：统一用同源
rgba()，如rgba(255,107,107,1)→rgba(255,107,107,0) - 仅两类场景可放心用
transparent：单色标蒙版（如mask-image）、CSS 框架强制依赖（如 Tailwind 的from-transparent，因 Safari 会丢弃rgba()）
