css - <meter> 有 3 种颜色

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>

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