如何让HTML/CSS百分比图表的边框变细？附示例代码

云上老周

2026-5-20

调整百分比饼图边框粗细的方法

我帮你梳理了这个饼图的实现逻辑，要让它的边框更细其实很简单，只需修改几处CSS属性就能搞定，具体步骤如下：

定位核心样式选择器
首先找到控制饼图的.piesite类的CSS规则，这是饼图的核心容器元素。
修改边框粗细属性
在.piesite的样式中，找到border-width属性，将它的数值调小即可。比如原来如果是10px，你可以改成5px或者更贴合需求的数值：
```
.piesite {
  border-width: 5px; /* 替换成你想要的边框粗细 */
  border-radius: 50%;
  border-style: solid;
  /* 保留其他原有样式不变 */
}
```
同步调整容器尺寸（可选）
边框变细后，饼图的视觉整体尺寸会缩小。如果想要维持原有整体大小，可以同步增加.piesite的width和height数值——因为边框是上下左右都存在的，所以边框减少的数值需要乘以2加到宽高中。比如原来宽高是100px，边框从10px改成5px，就把宽高设为110px：
```
.piesite {
  width: 110px;
  height: 110px;
  border-width: 5px;
}
```
检查伪元素样式（若存在）
这类饼图有时会用::before或::after伪元素实现遮罩或半块饼图效果，如果你的代码里有这类伪元素，也要同步调整它们的宽高或边框相关属性，确保整体显示正常。