根据进度条颜色将线性渐变应用于 html 进度条

Question

我有以下代码将线性渐变应用于进度条。

目前它以相同颜色显示渐变rgb(33, 177, 89)

如何保持进度条颜色并对其应用线性渐变？

我正在尝试在第一个进度条上显示渐变，颜色为红色和第二个蓝色。

<div style="color:red;">
  <progress style=background:currentColor max="100" value="85" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" tabindex="-1">
  </progress>
</div>

<div style="color:blue;">
  <progress style=background:currentColor max="100" value="85" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" tabindex="-1">
  </progress>
</div>

这是 jsfiddle

https://jsfiddle.net/nick1111/3bLgLr9h/95/

Answer 1

因此，HTML 标记不会像脚本语言那样自然地拉入父数据。您实际上必须定义将根据应用的类更改外观的 CSS 类。

<style type="text/css">

.row { margin:20px 0; }

progress {
    border: 0;
    background: #eee;
    border-radius: 100px;
} 

progress::-webkit-progress-bar {
    background: #eee;
    border-radius: 100px;
}

progress::-webkit-progress-value {
    border-radius: 100px;
    background: linear-gradient(to right, rgba(33, 177, 89, .1), rgba(33, 177, 89, 1));
}

progress.red::-webkit-progress-value {
    border-radius: 100px;
    background: linear-gradient(to right, rgba(255, 0, 0, .1), rgba(255, 0, 0, 1));
}

progress.blue::-webkit-progress-value {
    border-radius: 100px;
    background: linear-gradient(to right, rgba(0, 0, 255, .1), rgba(0, 0, 255, 1));
} 

<div class="row">
    <progress class="red" max="100" value="85" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" tabindex="-1"></progress>
</div>
<div class="row">
    <progress class="blue" max="100" value="85" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" tabindex="-1"></progress>
</div>