transparent 实际是 rgba(0,0,0,0)，插值时按预乘黑计算，导致渐变发灰发黑、动画硬切、边框交界出黑线、打印变黑及 Safari 热区失效；应统一用同色系 rgba() 替代。
transparent 不是“透明色”，而是 rgba(0, 0, 0, 0) —— 浏览器把它当预乘黑处理，插值时必然经过灰黑中间态。
linear-gradient 中 transparent 导致发灰/发黑
写 linear-gradient(to right, #ff6b6b, transparent) 时，浏览器实际执行的是 #ff6b6b → rgba(0,0,0,0) 插值。这个路径里没有红色成分衰减逻辑，只有 RGB 三通道被 alpha 拉向零，结果就是暗红 → 棕灰 → 近黑。Firefox 和 Safari 15–16 尤其明显，末端常浮一层灰边；如果父容器背景是浅灰，就会透出“黑底+浅灰背景”的视觉污染。
- transparent 在渐变中合法，但语义上不携带色相信息，无法参与颜色空间插值
- 多色标如
linear-gradient(90deg, #ff6b6b, transparent 50%, #4ecdc4)，旧版 Firefox 会把transparent当纯黑参与三段插值，50% 位置容易出现灰线 - 别指望用
transparent实现“保留原色的透明过渡”——它做不到
transition 动画里 transparent → 具体色会跳变
transition: background-color 0.3s 配合 background-color: transparent → background-color: #007bff，结果不是渐变，而是硬切。因为 transparent 是语义关键字，不属于 sRGB 色彩空间；#007bff 是具体颜色值，类型不匹配，浏览器直接拒绝插值。
- 正确做法是两端都用
rgba()：起始写rgba(0, 123, 255, 0)，结束写rgba(0, 123, 255, 1) - 若起点色来自 CSS 变量（如
--primary-rgb: 0, 123, 255），终点应写成rgba(var(--primary-rgb), 1)，保持色相一致 - 混用
transparent和rgba()或十六进制，在动画中仍不可靠
border 三角形交界处黑线的根源
用 border-top: 100px solid transparent 和 border-left: 100px solid #eee 画三角形，交界处常有灰黑色细线。这不是抗锯齿 bug，而是 transparent 不提供颜色信息，浏览器找不到插值依据，只能拿黑色补位。
立即学习“前端免费学习笔记（深入）”；
- 解决方式是把
transparent换成同源透明色：rgba(238, 238, 238, 0)（即#eee的 alpha=0 版本） - 更稳妥的是用 CSS 变量统一管理：
--bg: #eee; --bg-transparent: rgba(238, 238, 238, 0); - 所有相邻 border 必须基于同一基础色的透明变体，否则抗锯齿算法失真
打印预览和 Safari 触摸热区失效
在 Chrome/Safari 打印预览中，transparent 和 rgba() 常被映射为黑色——因为多数打印控件不支持 alpha 通道，又没指定底色，就兜底为黑。Safari 还会把 border: 1px solid transparent 解释为“无绘制意图”，导致点击区域丢失或 drop-shadow 被截断。
- 打印场景下，改用显式纯色 +
print-color-adjust: exact - Safari 热区问题：用
rgba(0, 0, 0, 0.001)替代transparent，实测 0.001 是最小有效 alpha 值 - 低于 0.001（如 0.0001）可能被渲染器优化掉，等于白写
真正麻烦的地方不在写法本身，而在你得时刻判断：这个 transparent 是静态占位，还是参与插值？是用于蒙版、边框，还是动画？不同上下文里，它的行为差异太大，稍不注意就漏掉某条链路的兼容性处理。
