transparent 是语义化颜色关键字，表示“无颜色信息”，非 rgba(0,0,0,0) 简写；支持所有 类型属性，但不适用于 opacity；与 currentColor、inherit 行为迥异，不可混用。
transparent 属于 CSS 颜色关键字（Color Keyword），不是数值型颜色表示法，也不依赖 RGB、HSL 或十六进制模型。
它是一个独立的、语义化的预定义关键字，和 red、blue、currentColor 同类，但功能特殊：不描述“什么颜色”，而是声明“不绘制颜色”。
为什么说 transparent 不是 rgba(0,0,0,0) 的简写？
虽然渲染结果常一致，但底层含义不同：
-
transparent是一个抽象状态，代表“无颜色信息”，浏览器可能跳过颜色通道计算； -
rgba(0,0,0,0)是具体值：RGB 为黑、Alpha 为 0，有明确的色彩空间坐标； - 在 CSS 动画中，
transition: background-color 0.3s从transparent→blue可能被浏览器解释为“无起点色→蓝”，插值不自然；而rgba(0,0,0,0)→rgba(0,0,255,1)插值路径清晰、可预测。
哪些属性支持 transparent？
它可用于任何接受
-
background-color（最常用） -
border-color（如画三角形时隐藏三边） -
color（让文字“隐形但占位”，比opacity: 0更轻量） -
outline-color、box-shadow的颜色部分（需注意阴影仍会渲染，只是颜色透明）
⚠️ 注意：transparent 不能用于 opacity 属性——opacity 只接受 0–1 数值，不是颜色值。
和 currentColor / inherit 混用时要注意什么？
三者都是关键字，但行为完全不同：
-
transparent：固定为完全透明，不继承、不计算； -
currentColor：动态取当前元素的color计算值，可被background-color、border-color等复用； -
inherit：强制从父级继承该属性的值（哪怕父级设的是transparent，子级也得到transparent）；
常见误用：把 background-color: currentColor 当成“透明背景”，其实它会取文本色——若文本是黑色，背景就是黑，不是透。
真正需要“穿透背景”时，别猜，就写 transparent；需要参与动画或渐变插值时，优先选 rgba(0,0,0,0)。两者不是替代关系，而是语义与用途的分工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
