不能用 rgb(from ... / alpha) 做主色调透明渐变，因其 / alpha 仅作用于静态终值、不参与插值；正确做法是用 rgba(var(--primary-rgb), α) 在 linear-gradient() 中显式定义色标，确保仅 alpha 变化以实现真正透明度过渡。
不能直接用 rgb(from ... / alpha) 做“主色调透明渐变”——因为相对颜色语法里的 / alpha 只作用于最终输出色，不参与渐变插值；真正要实现的是在 linear-gradient() 里用主色调的 rgba 衍生值做色标过渡。
为什么不能对 relative color 直接加透明度做渐变
相对颜色语法（如 rgb(from var(--primary) r g b / 50%)）生成的是一个**静态计算后的单一颜色值**，不是可插值的颜色序列。把它塞进 linear-gradient() 当作色标，浏览器只会取这个固定色 + 固定透明度，无法形成“从半透到全透”的连续变化。
常见错误写法：background: linear-gradient(to right, rgb(from var(--primary) r g b / 0.2), rgb(from var(--primary) r g b / 0.8));
这实际等价于两个固定 rgba 值的硬切，中间没有 alpha 插值逻辑，视觉上是“灰阶变化”而非“透明度渐变”。
正确做法：用 CSS 变量 + rgba() 显式控制 alpha
把主色调拆解为 RGB 分量后，在 linear-gradient() 中用 rgba() 手动构造不同透明度的色标，确保 RGB 不变、仅调第四个参数。
- 先定义主色调变量：
--primary: #2196f3; - 用
color-mix()或开发者工具查出其 RGB 值（33, 150, 243），或改用现代写法：--primary-rgb: 33 150 243; - 渐变写法示例：
background: linear-gradient(to right, rgba(var(--primary-rgb), 0), rgba(var(--primary-rgb), 0.9));
这样浏览器才能在 alpha 通道上做线性插值，实现真正的透明度过渡。
更灵活的方案：LCH 空间 + calc() 动态调整亮度与透明度
如果主色调已用 lch() 定义（如 --primary: lch(55% 75 250);），可在渐变中结合 rgba() 和 color-mix() 实现语义化控制：
- 保持色相与饱和度不变，只降亮度模拟“褪色感”：
--primary-fade: lch(calc(l * 0.7) c h); - 但注意：
lch()本身不带 alpha，仍需套rgba()或rgb()+/ alpha输出 —— 且必须用于色标，不能用于整个linear-gradient()函数参数 - 推荐组合：
background: linear-gradient(to bottom, rgba(33, 150, 243, 0), color-mix(in srgb, lch(from var(--primary) l c h) 100%, transparent 0%));（后者实际无效，仅示意意图；真实可用的仍是rgba()色标）
容易被忽略的关键点
多层背景叠加时，渐变必须写在图片之前；transparent 在部分 Safari 版本中解析为黑色全透，导致渐变起始段发灰；移动端 alpha 差值小于 0.1 很难察觉，建议跨度设为 0 → 0.3 → 0.8 这类明确阶梯；所有 alpha 控制必须落在 linear-gradient() 的色标内部，绝不能靠 opacity 或外部容器透明度“模拟”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
