transparent是语义关键字，不参与颜色插值，导致transition跳变；rgba(0,0,0,0)是预乘alpha具体值，可平滑插值，且需与目标色同源以避免偏色。
transparent 和 rgba(0,0,0,0) 在颜色插值（interpolation）中根本不能互换
transition 动画里 transparent 会跳变，不是浏览器 bug
写 transition: background-color 0.3s，再设起始色为 transparent、终点为 #007bff，多数浏览器会直接“闪”到目标色，不渐变。因为 transparent 是语义关键字，不属于任何色彩空间；而 #007bff 是 sRGB 值，两者类型不匹配，浏览器拒绝插值。
- 必须统一用
rgba()：起始色写成rgba(0, 0, 0, 0)，终点写成rgba(0, 123, 255, 1) - 若起点是其他色（如
#eee），别硬套rgba(0,0,0,0)—— 应该用rgba(238, 238, 238, 0)，保持色相一致，避免插值偏色 - PostCSS 插件如
postcss-color-function可自动把transparent转为同源rgba()，但需配置preserveHue: true
linear-gradient 中 transparent 是语法刚需，不能替换
CSS 渐变规范（Images Level 3）明确定义 transparent 为合法色标（color stop），而 rgba(0,0,0,0) 在部分浏览器（Safari 15–16、旧版 Chrome）会被解析失败，导致整条渐变丢弃。
- 正确写法：
background: linear-gradient(to right, transparent, #007bff) - 错误写法：
background: linear-gradient(to right, rgba(0,0,0,0), #007bff)—— Safari 可能渲染为空白 - 原因：渐变色标解析器在早期实现中只识别关键字和命名色，
rgba()属于 color function，未被完全纳入 gradient grammar
border 三角形交界处出黑线？根源在插值起点缺失
用 border-top: 100px solid transparent + border-left: 100px solid #eee 做三角形时，Firefox/IE9+ 抗锯齿会在交界处合成出灰黑色细线。这不是渲染错误，而是 transparent 表示“无颜色信息”，浏览器找不到插值起点，只能拿黑色补位。
- 解决方式不是调
opacity或加backface-visibility，而是让所有 border 使用同一基础色的透明变体 - 把
transparent换成rgba(238, 238, 238, 0)（即#eee的 alpha=0 版本） - 如果用 CSS 变量控制主题色，建议定义
--bg: #eee; --bg-transparent: rgba(238, 238, 238, 0);，而非复用transparent
真正容易被忽略的是：插值行为取决于上下文语法层级，不是“看起来一样就能混用”。transparent 在渐变里是语法糖，在动画里是类型断点，在 border 里是语义空值——它从不参与计算，只负责跳过。你得先看清楚当前 CSS 属性处在哪条渲染流水线上，再决定用哪个“透明”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
