目前无法在任何稳定版浏览器中用Relative Color语法动态修改Alpha通道，因from关键字未被Chrome、Firefox或Safari正式支持，含from的声明均被静默丢弃。
目前无法在任何稳定版浏览器中用 Relative Color 语法动态修改 Alpha 通道——from 关键字尚未被 Chrome、Firefox 或 Safari 的正式版本支持，所有含 from 的声明都会被静默丢弃。
为什么 rgb(from var(--c) r g b / 0.7) 不生效
这不是写法错误，而是浏览器根本不认识 from。Chrome 111+ 仅在开启 #css-relative-color-syntax 实验 flag 时支持极简的 color(from red ...) 形式，且明确不支持 var(--x) 回溯；Firefox 和 Safari 完全忽略整条规则，DevTools 里可能显示“已应用”，但 computed value 实际是初始值或继承值。
常见误判点：
-
rgb(from var(--primary) r g b / 0.5)看似合理，但解析器遇到未知函数直接跳过，不会降级为rgb(255, 255, 255)或报错 -
hsl(from var(--c) h s l / 0.5)同样无效——hsl()函数本身不接受from参数，该语法属于 CSS Color 5 草案 - 预处理器（Sass/Less）和 PostCSS 插件也无法解析这种嵌套引用，构建时无法展开
现在真正能用的 Alpha 动态方案
绕过 from，用已广泛支持的原生能力组合实现相同目标：
立即学习“前端免费学习笔记（深入）”；
- 直接定义 8 位十六进制变量：
:root { --primary: #3b82f680; }（0x80 ≈ 50%），现代浏览器（Chrome 65+、Firefox 62+、Safari 12.1+）原生支持，无需计算 - 用
color-mix()混合透明色：color-mix(in srgb, var(--primary) 100%, transparent 30%)，兼容性好，且能线性控制明度与通透感 - 拆 RGB 分量 + 单独 alpha 变量：
:root { --primary-rgb: 59, 130, 246; --alpha: 0.7; }，再写background-color: rgba(var(--primary-rgb), var(--alpha));——这是目前最稳妥的跨浏览器方案
JS 动态改 Alpha 的安全写法
如果需要运行时切换（比如主题切换、hover 响应），避免依赖 CSS 计算：
- 不要尝试
el.style.setProperty('--alpha', '50%')——rgba()要求 alpha 是 0–1 小数，"50%"或50都会失效 - 正确做法：
el.style.setProperty('--alpha', 0.3)（必须是小数） - 若用 HSL，改
hsla()的第四个参数：color: hsla(var(--h), var(--s), var(--l), var(--alpha));，注意前三个参数单位要统一（%或无单位），--alpha必须是小数
真正要注意的不是“怎么写 from”，而是意识到：所有基于 from 的写法在今天都是不可交付的。能进生产环境的，只有 #rrggbbaa、color-mix()、RGB/HSL 拆分变量这三类已落地的能力。工具链（如 PostCSS）对 from 的转译也极不可靠，尤其涉及自定义属性回溯时，输出常为空或错误值。
