3种颜色的<meter>

Question

我想实现一个仪表，将被用作VU仪表。在那一刻，我有这样的想法：

<meter id="sr_volume_meter" value="0" min="0" optimum="30" max="65" low="15" high="45" style="width:100px; height:20px;"></meter>

但是，至少在Chrome浏览器中，它在min下方和max上方分别显示黄色和黄色。如果值大于max，我想显示红色。我如何实现这一点？

Answer 1

如果你想要做的就是用红色替换“次优”的黄色，这样的东西在Mozilla和Chrome上就可以用了。

​

meter {
    width:100px; height:20px;
}

:-moz-meter-sub-optimum::-moz-meter-bar {
    background-image: linear-gradient(rgb(230, 100, 100), rgb(230, 100, 100), rgb(238, 108, 108) 20%, rgb(204, 74, 74) 45%, rgb(204, 74, 74) 55%);
}
::-webkit-meter-suboptimum-value {
    background-image: linear-gradient(rgb(230, 100, 100), rgb(230, 100, 100), rgb(238, 108, 108) 20%, rgb(204, 74, 74) 45%, rgb(204, 74, 74) 55%);
}

<p><meter min="0" low="15" optimum="30" high="45" max="65" value="0"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="10"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="20"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="30"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="40"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="50"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="60"></meter></p>
<p><meter min="0" low="15" optimum="30" high="45" max="65" value="70"></meter></p>

​

或者你的意思是你想要一个双色条，在“高”标记下面的部分是绿色的，上面是红色的？