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>

根据进度条颜色将线性小工具应用于html进度条

1 个答案: