progress默认样式不支持直接border-radius，因各浏览器通过不同伪元素控制内部渲染：Chrome/Edge需分别设置::-webkit-progress-bar和::-webkit-progress-value的border-radius；Firefox需用::-moz-progress-bar并配合progress背景色；Safari 15.4+起支持标准::progress-value，建议兼容写法并存声明。
progress 默认样式不支持直接 border-radius
浏览器对 <progress></progress> 的默认渲染是通过内部伪元素控制的，直接给 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 直接作用于填充区域。它不提供独立的轨道伪元素，所以圆角只能靠这个伪元素自身撑满 + 圆角控制。
立即学习“前端免费学习笔记（深入）”；
- 必须给
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;
}
Safari 15.4+ 开始支持标准 ::progress-value 伪类
Safari 15.4 起弃用 ::-webkit-progress-value，转向草案中的标准伪类 ::progress-value。但目前（截至 Safari 17）仍**同时支持两者**，稳妥做法是并存声明。
- 只写
::progress-value会导致旧 Safari（ - 不要省略
::-webkit-progress-value，尤其还要兼容 iOS 16 及更早系统 - 标准伪类不带前缀，但尚未被 Chrome/Firefox 支持，纯靠它无法跨浏览器生效
真正容易被忽略的是：哪怕所有伪元素都加了 border-radius，如果父容器或 progress 自身有 transform、clip-path 或 mask，也可能导致圆角被裁切——调试时得一层层检查继承和层叠关系。
