HTML中progress圆角设置 HTML中progress标签CSS伪元素修改-html教程-PHP中文网

progress默认样式不支持直接border-radius，因各浏览器通过不同伪元素控制内部渲染：Chrome/Edge需分别设置::-webkit-progress-bar和::-webkit-progress-value的border-radius；Firefox需用::-moz-progress-bar并配合progress背景色；Safari 15.4+起支持标准::progress-value，建议兼容写法并存声明。

html中progress圆角设置 html中progress标签css伪元素修改

progress 默认样式不支持直接 border-radius

浏览器对的默认渲染是通过内部伪元素控制的，直接给 progress 元素加 border-radius 只会影响外层容器（比如 Chrome 下可能看到边框变圆，但进度条本身仍是直角），真正起作用的是其内部伪元素。不同浏览器实现差异大，必须针对性覆盖。

常见错误现象：progress { border-radius: 8px; } 看似生效，实则只是包裹盒变圆，内部蓝色填充条边缘依然尖锐——这是最常被忽略的点。

Chrome / Edge 中用 -webkit-progress-bar 和 -webkit-progress-value

Chromium 内核浏览器使用两个关键伪元素：::-webkit-progress-bar 控制背景轨道，::-webkit-progress-value 控制已填充部分。二者都需单独设 border-radius 才能实现整体圆角效果。

::-webkit-progress-bar 必须设 border-radius，否则轨道两端露直角
::-webkit-progress-value 的 border-radius 值要和轨道一致，且需加 overflow: hidden 防止溢出（某些旧版 Chrome 需要）
若设置 height，建议用 em 或 rem，避免在缩放时失真

progress {
  height: 0.5em;
}
progress::-webkit-progress-bar {
  background-color: #e0e0e0;
  border-radius: 4px;
}
progress::-webkit-progress-value {
  background-color: #4285f4;
  border-radius: 4px;
  overflow: hidden;
}

Firefox 中用 -moz-progress-bar

Firefox 不支持 ::-webkit- 伪类，而是将整个进度条视为一个可样式化的部件，用 ::-moz-progress-bar 直接作用于填充区域。它不提供独立的轨道伪元素，所以圆角只能靠这个伪元素自身撑满 + 圆角控制。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

必须给 progress 设置 background-color 作为轨道底色，再用 ::-moz-progress-bar 覆盖填充色
::-moz-progress-bar 的 border-radius 会同时影响填充条两端，但不会自动拉伸贴合轨道——需确保 height 与伪元素高度一致
Firefox 不支持 overflow 在该伪元素上生效，圆角依赖精确的尺寸匹配

progress {
  background-color: #e0e0e0;
  border-radius: 4px;
  height: 0.5em;
}
progress::-moz-progress-bar {
  background-color: #4285f4;
  border-radius: 4px;
}