标签仅渲染横向标尺，不支持环形、指针等仪表盘元素；必须显式设置 min/max/value 才能正常显示，low/high/optimum 影响语义颜色但跨浏览器表现不一；css 自定义能力有限，复杂需求应选 svg 或 canvas。
<meter></meter> 标签不能做仪表盘，它只渲染横向标尺，不支持环形、指针、刻度线等任何“仪表盘”视觉元素。想用它展示“数值区间分布”，必须接受它的语义边界：仅表示一个静态标量值在已知范围内的相对位置。
为什么标签总显示为空或灰色？
最常见原因是属性缺失或值非法：
-
min和max必须显式写出，不能依赖默认值（哪怕你认为是 0 和 1）；省略会导致部分浏览器（如 Firefox SSR 渲染）直接跳过绘制 -
value必须是合法数字，value="85%"或value="85"（但max="100"）都行，但value="eighty-five"或空字符串会降级为 0 -
value超出[min, max]区间时，Chrome 显示灰色空条，Safari 可能完全不渲染，且不报错、不警告 - 动态更新时只改
textContent（比如 innerText = "92%"）而没同步设置value属性 → 视觉不变，辅助技术也读不到新值
low / high / optimum 怎么影响颜色？
这些属性不控制 CSS 类，而是由浏览器内置逻辑决定填充色的语义状态，实际表现高度不可控：
-
low和high定义“正常区间”边界：值 ≤low→ 偏低（常为橙/红），≥high→ 偏高（同上），中间为“正常”（常为绿） -
optimum是理想值，可以落在low左侧（如节能温度设为 18℃）、high右侧（如分数越高越好），或居中；浏览器据此微调色相倾向，但无统一标准 - Chrome 支持
::-webkit-meter-optimum-value等伪元素，Firefox 几乎无视这些属性，只按 value 占比填色 -
low > high不报错，但语义混乱：例如low="80" high="20"会让浏览器难以判断何为“正常”，颜色反馈失效
CSS 自定义 的真实能力边界
别指望靠 CSS 把 <meter></meter> 改造成专业仪表盘——它原生样式极简，自定义路径狭窄且碎片化：
- 可安全使用的：全局尺寸（
height、width）、圆角（border-radius）、整体背景（background） - WebKit 内核（Chrome/Edge/Safari）支持伪元素：
::-webkit-meter-bar（外框）、::-webkit-meter-value（填充条）、::-webkit-meter-optimum-value（最优段），但 Safari 对后两者支持不稳定 - Firefox 仅允许修改
meter元素本身样式，无法穿透到内部填充；appearance: none在各浏览器中行为不一，禁用后可能丢失所有语义样式 - 无法添加文字标签、百分比数字、刻度线、箭头指针——这些必须用额外 DOM 元素绝对定位叠加，且需手动同步
aria-valuenow等无障碍属性
真正要表达“区间分布”，比如多段阈值（0–30% 红、30–70% 黄、70–100% 绿），<meter></meter> 的语义能力已经到顶；若还需交互、动画、响应式缩放或跨浏览器一致外观，直接换 <canvas></canvas>、SVG 或轻量库（如 svg-gauge）更省心。它的价值不在“像不像仪表盘”，而在结构清晰、屏幕阅读器可读、搜索引擎可索引——这点容易被视觉需求带偏。
