CSS实现圆形仪表盘50%-60%区间数值不更新问题求助

你遇到的50%-60%区间数值不生效的问题，本质是CSS属性选择器的匹配逻辑和仪表盘的绘制规则不匹配导致的：

1. 原代码中用于放开裁剪的规则.gauge-markup[data-fill^="6"] span仅匹配data-fill以6、7、8、9、10开头的数值，51-59的数值以5开头，无法命中该规则，导致span元素的clip属性始终为rect(0, 5em, 5em, 2.5em)，仅显示容器右半部分，左半区域被完全裁剪。
2. 该仪表盘的绘制逻辑是：≤50%的进度仅通过右半部分的::before伪元素绘制；>50%的进度需要额外通过左半部分的::after伪元素补充绘制。左半区域被裁剪后，::after的旋转效果完全不可见，因此进度始终卡在50%的位置。

两步修改即可修复问题：

1. 修正裁剪放开的匹配规则 #

将原CSS中放开裁剪的选择器修改为覆盖51-99及100的所有大于50%的数值：

/* 匹配所有≥51的数值 */
.gauge-markup[data-fill^="5"]:not([data-fill="5"]):not([data-fill="50"]) span,
.gauge-markup[data-fill^="6"] span,
.gauge-markup[data-fill^="7"] span,
.gauge-markup[data-fill^="8"] span,
.gauge-markup[data-fill^="9"] span,
.gauge-markup[data-fill="100"] span {
  clip: rect(auto, auto, auto, auto)
}

2. 修正旋转角度计算规则 #

百分比和旋转角度的换算公式为1% = 3.6deg（360度对应100%进度）：

• 进度≤50%时，仅修改::before的旋转角度，值为进度值 * 3.6deg
• 进度>50%时，::before固定为rotate(180deg)（对应满额50%进度），::after的旋转角度为-(进度值 * 3.6deg - 180deg)

以59%为例，正确的::after旋转角度应为-32.4deg，修正对应CSS规则即可正常显示：

.gauge-markup[data-fill="59"] span::after {
  transform: rotate(-32.4deg)
}

修改完成后，50%-60%区间的所有数值都可以正常渲染进度。

内容的提问来源于stack exchange，提问作者Gemaeden