transparent在transition中会导致跳变，因其无rgb分量无法线性插值；safari下还丢失触摸热区，渐变中锚定为rgba(0,0,0,0)引发偏色，应统一用同源rgba()替代。
transition动画中transparent会导致跳变
浏览器无法对transparent做线性插值，因为它没有RGB分量可参与计算。比如background-color: red → transparent在Safari或旧Chrome里常硬切，而不是渐变消失。
正确做法是统一用同源rgba()：background-color: rgba(255,0,0,1) → rgba(255,0,0,0)。若起点色来自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)
CSS规范允许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()）。
语义与底层处理根本不同
transparent是语义关键字，代表“此处不参与颜色计算”；rgba(0,0,0,0)是预乘Alpha的具体色值，RGB通道已被alpha缩放为(0,0,0)。
这意味着：transparent可能跳过颜色合成步骤，性能略优；rgba(0,0,0,0)强制走完整color pipeline。某些WebGL或Canvas后端对pre-multiplied输入敏感，transparent更可能绕过误判。
border三角形交界处出现黑线？问题常出在transparent和实色边不匹配——把transparent换成rgba(238,238,238,0)（即相邻边框色的alpha=0版本），就能消除灰黑色过渡线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
