transparent性能更优，因浏览器将其识别为“无颜色参与”，可跳过预乘Alpha计算与颜色合成；而rgba(0,0,0,0)必须执行完整color pipeline，即使结果全透明。
transparent 和 rgba(0,0,0,0) 渲染性能差异在哪
浏览器对 transparent 的处理更轻量：它被识别为“无颜色参与”，可跳过预乘 Alpha 计算、颜色合成等步骤；而 rgba(0,0,0,0) 是明确的预乘色值，必须走完整 color pipeline，哪怕结果是黑+全透明。
在大量元素（如列表项、网格项）或高频重绘场景（如滚动中悬停反馈）下，transparent 的帧率更稳。实测 Chrome DevTools 的 Layers 面板中，含 transparent 的背景层常被标记为 “skipped paint”，而 rgba(0,0,0,0) 会触发实际绘制节点。
- 使用
transparent做background-color时，若父容器有 backdrop-filter，不会意外触发额外合成层 -
rgba(0,0,0,0)在某些 Canvas 2D 上下文（如ctx.fillStyle）中可能被当作有效色值参与插值，而transparent会被忽略或报错 - WebGL 渲染器对预乘/非预乘输入敏感，
transparent更大概率绕过 alpha 格式误判
transition 动画里 background-color 从 blue → transparent 为什么跳变
因为 transparent 不是颜色插值的合法终点——它没有 RGB 分量，浏览器无法在 rgb(0,0,255) 和 “无色” 之间线性插值，多数引擎直接 fallback 到硬切（jump-cut）。
这不是 bug，是规范行为：transparent 在 CSS 颜色模型中不携带色相信息，无法与任何 rgb()、hex 或 hsl() 值构成连续插值路径。
立即学习“前端免费学习笔记（深入）”；
- 要实现平滑淡出，起点和终点都得用
rgba()：比如background-color: rgba(0,0,255,1)→background-color: rgba(0,0,255,0) - 若起点是变量色（如
--primary-rgb: 0, 0, 255），终点写成rgba(var(--primary-rgb), 0)可保色相一致 - 用
@keyframes强制过渡时，transparent仍不可靠；动画中应全程避免混用transparent和具体色值
border 三角形交界处出现灰黑细线的原因
当写 border-top: 100px solid transparent + border-left: 100px solid #eee 做 CSS 三角形时，Firefox、Safari 等启用抗锯齿的浏览器会在交界处插值出灰黑色过渡线。
根本原因是：transparent 被当作“无色彩信息”，浏览器拿不出合理的渐变起点，只能用默认黑底硬凑插值中间色。
- 解决办法不是换工具，而是统一色源：把
transparent换成rgba(238,238,238,0)（即#eee的 alpha=0 版本） - 所有相邻 border 必须基于同一基础色的透明变体，否则抗锯齿算法会失真
- PostCSS 插件如
postcss-color-function可自动转换，但需配置保留原始色相，不能简单全局替换
linear-gradient 中用 transparent 为什么有时失效或偏暗
transparent 在 linear-gradient 中被锚定为 rgba(0,0,0,0)，而非“无色”。所以 linear-gradient(to right, red, transparent) 实际插值路径是 red → rgba(0,0,0,0)，中间必然经过暗红、棕灰、近黑等非预期过渡。
Safari 15–16、旧版 Chrome 对 transparent 在多色标中的插值支持不稳定；Firefox 120 前会直接按纯黑参与计算，导致 50% 处出现灰边。
- 可控写法是同色相渐变：
linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)) - 加位置停顿能缓解突兀感：
rgba(255,0,0,0) 70%，让透明部分有缓冲区 - Tailwind 的
from-transparent能工作，是因为它只用于单色标起始位，且底层依赖规范强制支持 —— 这类场景可以放心用，但别扩展到多标或复杂插值
真正容易被忽略的是：transparent 的“语义安全区”极小——仅限单色标蒙版、规范强制要求的色标位置；一旦涉及插值、交界、多浏览器混合环境，就必须显式控制色相和 alpha 分离。
