如何更改进度条值的边界半径？

Question

我在更改 HTML5 <progress> 元素值的边界半径时遇到问题。我尝试将边框半径应用于进度元素本身和 progress[value]，但这似乎没有任何作用。

所以我希望进度条值看起来像这样：

而不是这个：

这是我目前的情况：https://jsfiddle.net/8m93Lorn/1/

有什么想法吗？

Answer 1

要做到这一点，您需要这样做：

这些似乎是重复的，但这实际上确保它适用于所有浏览器

progress {
    border: 0;
    height: 40px;
    border-radius: 20px;
}
progress::-webkit-progress-bar {
    border: 0;
    height: 40px;
    border-radius: 20px;
}
progress::-webkit-progress-value {
    border: 0;
    height: 40px;
    border-radius: 20px;
}
progress::-moz-progress-bar {
    border: 0;
    height: 40px;
    border-radius: 20px;
}

Fiddle

希望对您有所帮助！

Answer 2

在我的 chrome 作品中使用此代码

progress[value]::-webkit-progress-bar {
  background-color: #ededed;
  border-radius: 40px;
}

progress[value]::-webkit-progress-value {
  border-radius: 40px;
  background-color:lightblue;
}

https://jsfiddle.net/8m93Lorn/2/

如何更改进度条值的边界半径？

How to change border-radius of progress bar value?

html

css

progress-bar