如何设置<meter>标签的非零起始值并高亮指定数值范围？

原生<meter>标签的min和max仅定义数值的有效范围，默认视觉呈现还是从min到max的完整进度条。要实现仅高亮0.4-0.6区间的效果，需要结合HTML属性配置和CSS自定义样式调整：

方法一：利用原生属性划分高亮区间 #

如果希望保留整体数值范围（比如0-1），同时让0.4-0.6作为“理想区间”高亮，可以使用low、high、optimum属性：

<meter min="0" max="1" low="0.4" high="0.6" optimum="0.5" value="0.5"></meter>

• low="0.4"：标记0-0.4为低区间
• high="0.6"：标记0.6-1为高区间
• optimum="0.5"：指定0.4-0.6为理想区间，多数浏览器会自动为该区间应用高亮样式

方法二：自定义CSS实现仅显示0.4-0.6高亮区间 #

如果希望视觉上只呈现0.4-0.6的区间（隐藏0-0.4和0.6-1的部分），可以通过容器包裹裁剪+自定义样式实现：

<div class="meter-container">
  <meter min="0" max="1" value="0.5"></meter>
</div>

<style>
.meter-container {
  width: 200px;
  overflow: hidden;
  /* 向左偏移，隐藏0-0.4的部分 */
  margin-left: -80px;
}
meter {
  /* 按比例计算总宽度：目标显示宽度/(0.6-0.4)，这里200px对应0.2的区间占比 */
  width: 1000px;
  height: 20px;
}
/* 自定义基础样式 */
meter::-webkit-meter-bar {
  background: #eee;
}
/* 自定义高亮填充样式 */
meter::-webkit-meter-optimum-value {
  background: #4CAF50;
}
/* Firefox兼容 */
meter::-moz-meter-bar {
  background: #4CAF50;
}
</style>

原理：通过容器的overflow:hidden和负边距，裁剪掉0-0.4和0.6-1的视觉部分，只保留中间0.4-0.6的区间，同时自定义填充颜色实现高亮。

方法三：纯CSS模拟meter效果（兼容性更强） #

如果浏览器默认样式差异大，可完全自定义模拟，精准控制高亮区间：

<div class="custom-meter">
  <div class="highlight-range"></div>
  <!-- value为0.5时，left设为50%，对应区间比例 -->
  <div class="value-indicator" style="left: 50%"></div>
</div>

<style>
.custom-meter {
  position: relative;
  width: 200px;
  height: 20px;
  background: #eee;
  border-radius: 10px;
}
.highlight-range {
  position: absolute;
  left: 40%; /* 0.4对应40%宽度占比 */
  right: 40%; /* 1-0.6=40%，预留右侧非高亮区域 */
  height: 100%;
  background: #4CAF50;
  border-radius: 10px;
}
.value-indicator {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  background: #333;
}
</style>

这种方式不受浏览器默认样式限制，能灵活调整高亮区间的位置、颜色和尺寸。

内容的提问来源于stack exchange，提问作者TIAS