from派生半透明色不可用于生产环境，因CSS Color 5草案未获浏览器稳定支持，rgb(from...)等会被静默丢弃；color-mix()是当前唯一可靠替代方案，可模拟半透效果但不支持动态alpha；真需精确控制仍须rgba()/hsla()手动拆解。
目前无法在生产环境安全使用 from 派生半透明色——所有主流浏览器（包括 Chrome 128+）都未正式支持该语法，即使开启实验 flag，var(--x) 回溯、calc() 嵌套、hsl(from ...) 等写法都会被解析器静默丢弃。
为什么 rgb(from var(--c) r g b / 0.5) 看起来生效了，实际却没用？
DevTools 样式面板常误判这类声明为“已应用”，但 computed value 实际是 initial 或继承值。根本原因不是浏览器“不支持”，而是：from 关键字仍属 CSS Color 5 草案，未进入任何稳定通道；浏览器遇到非法函数（如 rgb(from ...)）时按规范跳过整条声明，不报错、不降级、也不 fallback。
color-mix() 是当前唯一可用的替代方案
它已在 Chrome 111+、Safari 16.4+、Firefox 117+ 稳定支持，可安全用于派生带透明度感的变体色（注意：不是真 alpha，而是颜色混合模拟）：
-
color-mix(in srgb, var(--primary), transparent 30%)→ 混合 70% 主色 + 30% 透明，视觉上接近半透 - 不能控制精确 alpha 值，但能保持色相/饱和度一致性
- 不支持
calc()动态计算比例，比例必须是固定百分比字面量 - 若需真正 alpha 控制（如背景叠加），仍得回退到
rgba()或hsla()
真要动态改透明度？老办法更可靠
用 CSS 变量 + rgba() 或 hsla() 手动拆解，虽然冗余但 100% 可控：
立即学习“前端免费学习笔记（深入）”；
- 定义主色为 RGB/HSL 字面量：
--primary-rgb: 30, 144, 255; - 派生半透色：
background-color: rgba(var(--primary-rgb), 0.6); - 或用 HSL 更易调亮度：
--primary-hsl: 210, 100%, 55%; color: hsla(var(--primary-hsl), 0.7); - 避免把颜色存成十六进制（如
#1e90ff），rgba()和hsla()都不接受十六进制输入
真正棘手的不是语法多难写，而是你改完一条 rgb(from ...) 后，在 Chrome DevTools 里看到它“绿了”，就以为成了——其实它早就被扔进了解析器的回收站。
