React中使用CSS实现仪表盘底部起止端向内凹圆角效果

你之前用&:before、&:after伪元素叠加形状做遮罩的思路没生效，核心原因是常规的矩形、圆形纯色遮罩没法完美匹配仪表盘的圆弧曲率，很容易出现衔接缝隙、硬边问题，用下面两种方案都可以稳定实现你要的效果：

• 优先推荐：SVG 路径原生绘制，无兼容问题
  放弃纯CSS画圆弧基底的写法，直接用SVG路径绘制仪表盘轨道，一次成型不需要额外遮罩：

  1. 画外圆弧的时候直接给路径加stroke-linecap="round"属性，自带圆润端点效果
  2. 在路径的两个起止端点位置，加二次贝塞尔曲线段做向内弯曲的衔接，直接连接外弧端点和内弧起点，调整贝塞尔控制点的坐标就能自由控制内弯的弧度大小
     核心代码参考：

  <svg viewBox="0 0 200 120" class="gauge">
    <!-- 仪表盘基底轨道 -->
    <path 
      d="M20 100 A80 80 0 1 1 180 100 Q180 88 168 88 A64 64 0 1 0 32 88 Q20 88 20 100 Z" 
      fill="#eee"
    />
    <!-- 进度层按比例计算路径长度即可，和基底写法一致 -->
  </svg>
  

  上述代码里两段Q开头的路径就是端点处的内弯弧段，修改Q后面的坐标参数就能调整内弯程度，圆角效果自然无硬边。

• 保留现有CSS代码的遮罩优化方案
  如果你不想重构现有代码，不需要加伪元素，直接给仪表盘容器加CSS遮罩就能实现效果，比伪元素叠色块的对齐精度高很多：

  .gauge {
    /* 保留你原有的圆锥渐变、尺寸、定位等样式 */
    -webkit-mask:
      radial-gradient(circle at left bottom, transparent 0, transparent 12px, #000 12px),
      radial-gradient(circle at right bottom, transparent 0, transparent 12px, #000 12px);
    mask:
      radial-gradient(circle at left bottom, transparent 0, transparent 12px, #000 12px),
      radial-gradient(circle at right bottom, transparent 0, transparent 12px, #000 12px);
  }
  

  代码里的12px就是圆角和内弯的半径值，按需调整数值到你想要的效果即可，记得给webkit内核浏览器加前缀保证兼容。

注意：纯CSS遮罩方案在部分低版本浏览器上可能有兼容问题，如果要覆盖全场景用户，优先选SVG实现方案，后续做进度动画、样式调整也更灵活。

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