用两个嵌套div模拟玻璃管和水银柱，外层设顶部圆角+overflow:hidden，内层用height百分比控制高度并配渐变色与反光阴影，结合ARIA属性实现无障碍和深色模式适配。
用 CSS 实现温度计图的核心思路
纯 HTML + CSS 就能做出可响应、无 JS 依赖的温度计图，关键不是画“温度计形状”，而是用两个嵌套 <div> 模拟“玻璃管”和“水银柱”：外层固定宽高与圆角，内层通过 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（而非继续用深蓝，否则对比度暴跌）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 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 监听主题切换。
为什么不用 SVG 或 Canvas 做温度计图
SVG 确实更精准，但带来额外复杂度：需要计算坐标、处理 viewBox 缩放、手动维护 <rect> 的 y 和 height；Canvas 则彻底失去语义化、不可选中、不能被打印样式捕获。
除非你有这些明确需求，否则不值得上 SVG/Cavas：
- 需要在水银柱里动态渲染小图标（如火焰、雪花）
- 要支持平滑动画（如液面晃动效果）
- 数据源来自实时传感器，更新频率 > 10Hz
普通业务场景下，CSS 温度计图加载快、可打印、无障碍友好、维护成本低——它的“简陋”恰恰是优势。
真正容易被忽略的是：水银柱顶部边缘是否做了细微阴影或高光模拟反光效果。加一行 box-shadow: inset 0 2px 4px rgba(255,255,255,0.3) 就能让它看起来更像真实玻璃管里的液体。
