<p>width: var(--progress)% 一定不生效，因为CSS解析器不支持字符串拼接，会将"75%"视为非法声明而丢弃，导致width回退为0%或auto；必须用calc(var(--progress, 0) * 1%)并确保--progress存纯数字。</p>
直接用 --progress 变量控制视频播放器进度条宽度是可行的，但必须确保变量值是纯数字、CSS 中用 calc(var(--progress) * 1%) 计算宽度，且通过 element.style.setProperty() 更新——写错单位、用错作用域或误设字符串值，进度条就会“卡住”或“消失”。
为什么 width: var(--progress)% 一定不生效
CSS 解析器不支持字符串拼接。当你写 width: var(--progress)%，浏览器只是把变量值（比如 "75"）原样替换进去，得到 "75%" 这个字符串；但解析时会把它当作非法声明丢弃，因为 % 是字面符号，不是运算符。结果就是 width 回退到初始值（常为 0% 或 auto），看起来进度条“没了”。
-
--progress应该存纯数字（如75），不是"75%"或75% - 必须用
calc(var(--progress, 0) * 1%)，让1%提供单位，calc()做乘法 - fallback 写成
var(--progress, 0)，不能是var(--progress, 0%)，否则0% * 1%是非法表达式
如何正确更新 --progress 并触发重绘
变量本身不会自动响应变化，必须让它在目标元素上“真实生效”，且被 CSS 属性实际引用。常见错误是改了 :root 的变量，但播放器容器没继承或没用到它。
- 优先在进度条元素本身上调用
progressBar.style.setProperty('--progress', 65)，而不是只改document.documentElement - 确保该元素的 CSS 中有类似
width: calc(var(--progress) * 1%)的声明，且该声明未被其他规则覆盖 - 别用
setAttribute('style', '--progress: 65')：这会清空整个内联样式，丢失height、background等关键属性 - 如果要批量更新多个变量（比如
--progress和--buffered），连续调用setProperty()即可，浏览器会合并重排
视频播放器场景下的特殊注意事项
视频进度条常需配合缓冲、拖拽、暂停等交互，变量更新时机和数值合法性比普通进度条更敏感。
立即学习“前端免费学习笔记（深入）”；
- 监听
timeupdate事件时，用Math.floor((video.currentTime / video.duration) * 100)计算百分比，避免浮点误差导致calc()失败 - 在
seeking或pause时也要同步更新变量，否则拖拽后进度条可能“跳回旧值” - 初始值建议设为
0（不是"0"或null），否则calc(null * 1%)会计算失败，宽度归零 - 若用
transform: scaleX()替代width（推荐用于防卡顿），记得加transform-origin: left，否则缩放中心偏移，视觉异常
最易被忽略的是数值类型校验：传入 ""、undefined 或 "abc" 给 --progress，CSS 不报错，但 calc() 会静默失败，进度条宽度直接回退——这种问题在拖拽松手瞬间或网络加载异常时特别容易暴露。
