CSS 如何实现仪表盘效果？

Question

CSS 如何实现仪表盘效果？

仓乃文 · Accepted Answer

仪表盘通过 conic-gradient 锥形渐变实现扇形进度显示，配合 mask 遮罩裁剪出仪表盘形状。

```css
.gauge {
  width: 200px;
  height: 100px;
  border-radius: 100px 100px 0 0;
  background: conic-gradient(
    #6c5ce7 0deg,
    #6c5ce7 calc(var(--value) * 1.8deg),
    #e0e0e0 calc(var(--value) * 1.8deg),
    #e0e0e0 180deg
  );
  position: relative;
  overflow: hidden;
}

.gauge::after {
  content: attr(data-value) "%";
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: bold;
}
```

补充说明：
- conic-gradient 从 0deg 到 180deg 绘制半圆仪表盘
- --value × 1.8deg 将百分比映射到 0~180 度范围
- border-radius 裁剪上半部分为半圆形
- 适合速度表、温度计、评分展示等场景