transparent 不是 rgba(0,0,0,0) 的简写，它是语义关键字，表示无颜色信息的抽象状态，不参与颜色计算与插值；rgba(0,0,0,0) 是预乘 alpha 的具体颜色值，可动画、可合成。
transparent 不是 rgba(0,0,0,0) 的简写——这是常见误解，但浏览器和规范层面都不成立。
transparent 是语义关键字，不是颜色值
- 它没有 RGB 分量，也不属于任何颜色空间（如 sRGB），浏览器内部不把它当作“颜色”来处理
- 规范中明确定义为“表示无颜色信息的抽象状态”，用于跳过绘制逻辑，而非参与计算
-
rgba(0,0,0,0)则是预乘 Alpha 模型下的具体颜色值：R、G、B 已被乘以 alpha（即 0 × 0 = 0），必须走完整颜色合成管线
transition 动画中会硬切，因为无法插值
- 写
background-color: blue → transparent，浏览器没法在线性插值时生成中间色（比如rgba(100,100,255,0.5)） - 结果是多数引擎直接跳帧或闪现，Safari 甚至完全不触发过渡
- 正确做法：统一用
rgba()，例如rgba(0,0,255,1) → rgba(0,0,255,0)，或配合 CSS 变量写成rgba(var(--primary-rgb), 0)
Safari 和旧 Android WebView 中行为更明显
-
border: 1px solid transparent在 Safari 下点击热区极弱，甚至失效——它被解释为“无绘制意图”，不参与事件命中检测 - 某些 Android X5 内核会把
transparent渲染成纯黑块，而rgba(0,0,0,0)至少能按预乘路径走通 - 解法不是“换简写”，而是用同源透明色：比如边框本该是
#eee，就写rgba(238,238,238,0)，避免混用
真正容易被忽略的是：这个差异不是“看起来一样就行”的问题，它贯穿在动画、事件、抗锯齿、渐变、合成层生成等所有环节。你改一个 transparent，可能只在 Safari 滚动时掉帧，也可能在 Firefox 渐变交界处突然冒出一条灰线——而错误源头，往往就藏在那行看似无害的声明里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
