HTML怎么做温度计图_html温度计式进度图实现【整理】-html教程-PHP中文网

用两个嵌套div模拟玻璃管和水银柱，外层设顶部圆角+overflow:hidden，内层用height百分比控制高度并配渐变色与反光阴影，结合aria属性实现无障碍和深色模式适配。

html怎么做温度计图_html温度计式进度图实现【整理】

用 CSS 实现温度计图的核心思路

纯 HTML + CSS 就能做出可响应、无 JS 依赖的温度计图，关键不是画“温度计形状”，而是用两个嵌套 <div> 模拟“玻璃管”和“水银柱”：外层固定宽高与圆角，内层通过 <code>height 或 scaleY() 控制填充高度，并用渐变色增强视觉真实感。

常见错误是直接用 border-radius 给单个元素加顶部半圆——这在缩放或百分比变化时容易露底、错位。正确做法是外层设 border-radius: 8px 8px 0 0（只圆顶），内层用 overflow: hidden 截断溢出部分。

如何用百分比动态控制水银高度

最稳妥的方式是给内层元素设 height: calc(100% * 0.65)（比如 65%），配合 transform: scaleY(0.65) 也能实现，但后者会拉伸子内容（如文字、图标），且在某些旧版 Safari 中有渲染抖动。

height + max-height 更可控：外层设固定高度（如 200px），内层用 height: 65%，再加 max-height: 200px 防超限
避免用 vh 单位做基准高度——滚动时视口变化会导致跳变
若需支持 IE11，别用 calc() 里的百分比乘法（IE 不支持 calc(100% * 0.65)），改用预设 class：level-65 对应 height: 65%

让温度计图适配深色模式和语义化

温度计本质是数据可视化，不能只靠颜色表达数值。必须加 aria-valuenow、aria-valuemin、aria-valuemax，否则屏幕阅读器无法识别进度值。

深色模式适配重点不在“换背景色”，而在确保水银柱与背景的对比度 ≥ 4.5:1。比如浅灰背景（#f0f0f0）配深蓝水银（#2563eb），切换深色模式后，背景变 #1e293b，水银就得同步调成 #60a5fa（而非继续用深蓝，否则对比度暴跌）。

推荐写法：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<div class="thermometer" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <div class="thermometer-fill" style="height: 65%"></div>
</div>

CSS 中用 @media (prefers-color-scheme: dark) 覆盖水银色值，而不是靠 JS 监听主题切换。