progress标签的value属性设了没反应，是因为未设置max属性或value超出max范围；必须同时指定value和max（如），且value为0–max间的数字，否则渲染异常或静默截断。
progress标签的value属性为什么设了没反应
直接写 value="50" 但进度条不动，大概率是忘了设置 max 属性。浏览器默认 max 是 1，所以 value="50" 实际超出范围，渲染为满格或不渲染。
必须显式声明 max，且 value 要在 0 到 max 之间才有效：
<progress value="30" max="100"></progress>
-
value和max都只接受数字，不要加单位或引号（HTML中引号可省略，但值必须是纯数字） - 设
value为负数或大于max，浏览器会静默截断为 0 或max，不报错也不提示 - 初始未设
value时，进度条显示“不确定状态”（带动画的模糊条），不是空白
用JavaScript动态更新progress的value
不能靠改 innerHTML 或属性字符串——必须操作 DOM 属性本身。最可靠方式是直接赋值 element.value：
const bar = document.querySelector('progress');<br>bar.value = 65; // ✅ 正确<br>// bar.setAttribute('value', '65'); ❌ 不推荐，可能触发重绘异常
- 每次赋值后浏览器自动重绘，无需手动触发
- 如果用
requestAnimationFrame做平滑动画，注意别高频调用（如每帧都设 value），progress 本身无动画能力，靠 CSS 过渡实现视觉平滑 - 服务端推送场景下，避免连续快速写入
value（比如每 50ms 一次），部分旧版 Safari 会卡顿或跳变
自定义progress样式时::before/::after无效
<progress></progress> 是替换元素（replaced element），伪元素 ::before 和 ::after 默认不生效。真正起作用的是浏览器私有伪类：
progress {<br> appearance: none;<br>}<br>progress::-webkit-progress-bar { background: #eee; }<br>progress::-webkit-progress-value { background: #4a90e2; }<br>progress::-moz-progress-bar { background: #4a90e2; }
-
appearance: none是前提，否则私有伪类不生效 - Firefox 只支持
::-moz-progress-bar，且仅能控制“已填充部分”，无法单独选中背景条（需用background直接画整个条） - Chrome/Edge 中
::-webkit-progress-value宽度由value和max决定，不能用width覆盖 - 不要试图给
progress设line-height或vertical-align来调高度——高度由height控制，且各浏览器默认值不同（Chrome 约 20px，Firefox 约 16px）
value动态更新但CSS过渡不生效
progress 的填充长度本身不支持 CSS transition，因为 ::-webkit-progress-value 等伪元素不响应常规过渡属性。正确做法是：用 transform: scaleX() 模拟，配合真实 value 更新：
progress {<br> position: relative;<br> overflow: hidden;<br>}<br>progress::before {<br> content: '';<br> position: absolute;<br> top: 0; left: 0; bottom: 0;<br> width: 100%;<br> background: #4a90e2;<br> transform-origin: left;<br> transition: transform 0.3s ease;<br>}<br>progress[data-value="30"]::before { transform: scaleX(0.3); }<br>progress[data-value="75"]::before { transform: scaleX(0.75); }
然后 JS 同步更新 data-value 属性和 value：
bar.value = 75;<br>bar.dataset.value = '75';
- 必须同时维护
value（语义和可访问性）和data-value（驱动 CSS） - scaleX 方案在 Safari 15.4+ 有渲染毛刺，建议加
will-change: transform缓解 - 无障碍方面，仅靠 CSS 模拟会丢失进度语义，务必保留原生
value和max
max 初始化和 appearance: none，这两处一错，后面所有样式和 JS 都白调。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
