不能。opacity 不接受 CSS 变量，因变量为字符串而 opacity 需 0–1 数字；可用 calc(var(--alpha) * 1) 或 filter: opacity(var(--alpha)) 实现响应式透明度，但后者触发层叠上下文且 IE 不支持。
opacity 能直接绑定 CSS 变量吗？
不能。opacity 不接受 CSS 变量作为值，写成 opacity: var(--alpha); 在大多数浏览器里会直接失效（降为 opacity: 1），因为 opacity 要求的是一个数字（0–1），而 CSS 变量本身是字符串类型，解析时无法自动转换。
怎么让 opacity 真正响应变量变化？
用 calc() 强制转换单位，或借助 filter: opacity() 替代。两者都支持变量，但行为和兼容性不同：
-
filter: opacity(var(--alpha));—— 支持变量，但注意：它会触发新层叠上下文，可能影响z-index、遮罩、合成性能；IE 完全不支持 -
opacity: calc(var(--alpha) * 1);—— 更安全的写法，利用calc()的类型推导能力把变量“当数字用”，Chrome/Firefox/Edge 均支持，Safari 15.4+ 开始支持 - 如果变量带单位（如
--alpha: 0.6;），calc()写法更稳；若写成--alpha: 60%;，就得用calc(var(--alpha) / 100)
动态改透明度时，哪些地方容易意外失效？
常见翻车点不是语法，而是作用域和继承链：
- CSS 变量必须在目标元素或其祖先上定义，
:root最保险；写在子选择器里却想控制父元素，无效 - 用 JavaScript 修改变量时，别漏掉
element.style.setProperty('--alpha', '0.3')的引号——值必须是字符串，0.3会变成'0.3'，但传数字 0.3 会被 toString() 处理，一般没问题；传整数如0就得小心，某些旧版 Safari 对0解析异常，建议统一用小数形式'0.0' - 动画中混用
opacity和filter: opacity()会导致跳变，因为它们是不同渲染通道，不要交叉使用
要不要用 transition 配合变量动画？
可以，但得明确过渡对象：
- 直接给
opacity加transition: opacity 0.2s，变量更新后它自然过渡——前提是变量生效了（见前一条） - 如果用
filter: opacity()，就得写transition: filter 0.2s，不能写opacity - 别给
:root变量加 transition，CSS 变量本身不可动画，动画的是属性，不是变量
变量本身不参与渲染，它只是个“占位符”。真正动起来的，永远是那个被变量驱动的属性——你得盯住这个属性本身是否合法、是否可过渡、是否被正确继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
