transparent不是颜色值，无rgb分量，无法与blue等色值线性插值，导致transition硬切；应统一用rgba()实现平滑过渡，且safari中transparent被视作“无绘制意图”，引发点击失效、边框灰线等问题。
transparent 和 rgba(0,0,0,0) 视觉上一样，但底层不是一回事——混用会出动画跳变、Safari 点击失效、边框交界灰线等真实问题。
transition 动画中 background-color 从 blue → transparent 为什么会硬切？
因为 transparent 不是颜色值，它没有 RGB 分量，浏览器无法在 rgb(0,0,255) 和“无色”之间做线性插值。结果就是多数引擎直接 fallback 到 jump-cut。
- 正确写法是起点终点都用
rgba()：background-color: rgba(0,0,255,1)→background-color: rgba(0,0,255,0) - 若起点是 CSS 变量（如
--primary-rgb: 0, 0, 255），终点写成rgba(var(--primary-rgb), 0)可保色相一致 -
@keyframes中也别混用transparent和具体色值，否则 Safari 仍可能跳帧
Safari 下 border: 1px solid transparent 为什么点不中？
Safari 把 transparent 解释为“无绘制意图”，导致该边框区域不参与点击热区计算，甚至 drop-shadow 合成时被裁掉一半。
- 实测有效替代方案：
border: 1px solid rgba(0,0,0,0.001)或更稳妥地用目标色的透明版，比如边框本该是#eee，就写rgba(238,238,238,0) -
0.001是 Safari 中最小有效 alpha 值；0.0001可能被渲染器优化掉 - 同理，
outline: 1px solid transparent在 Safari 中热区极弱，必须替换
大量列表项用 background-color: transparent 还是 rgba(0,0,0,0)？
transparent 性能更好：浏览器识别它为“无颜色参与”，可跳过预乘 alpha 计算与颜色合成；而 rgba(0,0,0,0) 必须走完整 color pipeline，哪怕结果不可见。
- Chrome DevTools 的 Layers 面板里，
transparent背景层常标为 “skipped paint”，rgba(0,0,0,0)会触发实际绘制节点 - 滚动中高频悬停反馈场景下，
transparent更稳帧率 - 但若父容器用了
backdrop-filter，background-color: transparent可能意外触发额外合成层，此时建议用rgba(0,0,0,0.001)
真正麻烦的不是“哪个更透明”，而是它们在不同上下文里扮演的角色根本不同：transparent 是语义标记，rgba(0,0,0,0) 是预乘色值——这个差异藏在动画、事件、合成、抗锯齿所有环节里，稍不注意就漏掉一个 Safari 兼容性问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
