rgb(from ...) 是唯一能基于现有颜色变量微调透明度的语法，但必须搭配斜杠/和alpha关键字，且仅chrome 111+、firefox 117+、safari 16.4+支持，需配fallback。
rgb(from ...) 是唯一能直接基于现有颜色变量做透明度微调的语法，但必须搭配 calc() 和 alpha 关键字，不能单独用。
为什么不能直接写 rgba(from --color, .5)
浏览器根本不认识这种写法——rgba() 不支持 from 语法，只有 rgb() 和 hsl() 支持。你得先用 rgb(from var(--color) r g b / alpha) 拆解再重算，否则会静默失败，背景直接变默认色（通常是透明或白色）。
rgb(from ...) 中的 alpha 怎么提取和修改
从一个已有颜色变量（比如 --primary: #007bff; 或 --primary: rgba(0,123,255,0.8);）出发，alpha 是自动提取出的透明度值，可以直接参与 calc() 运算：
-
--primary: rgba(0,123,255,0.8);→alpha就是0.8 - 想降到 40% 不透明度：写成
/ calc(alpha - 0.4) - 想固定为 0.3：直接写
/ 0.3，不用calc - 如果原色没 alpha（如
#007bff），alpha默认为1
常见错误：漏掉斜杠 / 或写错位置
rgb(from var(--color) r g b / alpha) 的斜杠 / 是必需分隔符，不是可选符号。下面这些都会失效：
-
rgb(from var(--color) r g b calc(alpha * 0.5))❌ 缺少/ -
rgb(from var(--color) r g b, calc(alpha * 0.5))❌ 逗号非法，rgb()不接受第四个参数 -
rgba(from var(--color) r g b / calc(alpha * 0.5))❌rgba()不支持from
正确写法只有一种：rgb(from var(--color) r g b / calc(alpha * 0.5))
兼容性现实：别在生产环境无脑用
rgb(from ...) 目前仅被 Chrome 111+、Firefox 117+、Safari 16.4+ 支持。Edge 基于新版 Chromium 所以也行，但 IE 和旧版 Safari/Android WebView 完全不识别，会跳过整条声明。线上项目必须配 fallback：
- 先写一句传统
background-color: rgba(0,123,255,0.5); - 再覆盖一行
background-color: rgb(from var(--primary) r g b / 0.5); - 不要依赖 CSS 自定义属性做跨浏览器计算逻辑
真正需要“动态调整透明度”的场景，往往意味着设计系统里颜色值本身是变量——这时最容易忽略的是：相对颜色语法只在声明时求值，不响应运行时变更。改了 --primary 的值，rgb(from var(--primary) ...) 不会自动重算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
