width: var(--progress)% 不生效，因CSS解析器不支持字符串拼接，替换后若非合法尺寸（如"75"%"）则声明失效；正确写法是width: calc(var(--progress, 0) * 1%)，--progress存纯数字，由calc注入单位。
直接用 --progress 变量控制 width 是可行的，但必须绕过 CSS 单位拼接限制，否则宽度不会更新或直接回退到 0。
为什么 width: var(--progress)% 一定不生效
CSS 解析器看到 var(--progress)% 会当作无效声明丢弃，因为自定义属性值（如 "75" 或 "75%"）不能和字面单位符号直接拼接。浏览器不执行字符串拼接，只做值替换 —— 替换后若结果不是合法尺寸（比如 "75%"% 或 "75" %），整个声明失效。
正确解法是把单位“剥离出来”，让 calc() 做乘法运算：
-
width: calc(var(--progress, 0) * 1%)——--progress存纯数字（如75），1%提供单位 - fallback 写成
var(--progress, 0)而非var(--progress, 0%)，否则0% * 1%仍是非法表达式 - 伪元素（如
::after）里写这行最稳妥，避免影响主元素布局流
style.setProperty('--progress', ...) 怎么传才安全
JS 注入变量时，传错类型会导致 calc() 计算崩溃或动画中断：
- ❌
el.style.setProperty('--progress', '75%')→ 后续calc('75%' * 1%)报错 - ❌
el.style.setProperty('--progress', 75)→ 看似对，但如果之前用style.width = '75%'设过，CSS 层级冲突，过渡可能被覆盖 - ✅
el.style.setProperty('--progress', String(Math.min(progressValue, 100)))—— 纯数字字符串，带防超限 - 务必确保该元素已渲染且 CSS 中已声明
transition: width 0.3s ease（作用于宽度变化的元素本身，不是父容器）
动画卡顿或跳变的三个硬性条件
哪怕语法全对，width 过渡仍可能不平滑，关键在渲染管线是否能插值：
- 初始
width必须明确为数值百分比（如0%），不能是auto、unset或未声明 —— 否则浏览器无法计算起始帧 -
transition必须写在**实际变宽的元素上**（比如.bar::after），写在父容器上无效 - 高频更新（如上传进度每 50ms 推一次）会触发频繁 layout，此时
transform: scaleX()更稳，但需同步改transform-origin: left并放弃width绑定
IE11 或旧版微信 X5 内核怎么兜底
CSS 变量在 IE11 完全不可用，@supports (--a: 0) 是唯一可靠检测方式，别信 UA 判断：
- 先写降级样式：
.bar { width: 0%; } - 再用
@supports (--progress: 0)包住变量逻辑，里面写.bar::after { width: calc(var(--progress) * 1%); } - 别在 IE 下 fallback 用
transform: scaleX()—— 它同样不被支持 - 如果项目已放弃 IE，整块
@supports可直接删掉，省得干扰 DevTools 检查
真正容易被忽略的是：父容器必须有明确高度，否则伪元素即使 width 在变，也“看不见”；还有，所有涉及 calc() 的变量值，必须确保是纯数字，任何空格、单位、引号混入都会让整条声明静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
