如何在html进度标记上应用线性渐变

Question

我正在尝试将线性渐变属性应用于html进度条标记。 这就是视觉效果的样子

这是进度标记的jsfiddle

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

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

.horizontal-gradient {
  background: linear-gradient(to left, blue, white);
}

我尝试为渐变创建一个css类，但不确定如何将它应用于进度条标记。

Answer 1

您需要定位:progress-bar和:progress-value。像这样：

＆＃13;

＆＃13;

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

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

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));
}

＆＃13;

<div><progress color="#8ccc62" max="100" value="85" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" tabindex="-1"></progress></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

正如您在样式代码中看到的那样，您必须使用:: - webkit-progress-value作为值背景，并使用:: - webkit-progress-bar作为进度标记的背景

progress {  
    /* Important Thing */
    -webkit-appearance: none;
    border: none;
}
progress::-webkit-progress-bar {
    background: lightgray;
}
progress[value="65"]::-webkit-progress-value{

background: #dafcd6; /* Old browsers */
background: -moz-linear-gradient(left, #dafcd6 0%, #57c64f 65%); 
background: -webkit-linear-gradient(left, #dafcd6 0%,#57c64f 65%);
background: linear-gradient(to right, #dafcd6 0%,#57c64f 65%);

}