空心圆样式 （css 遮罩层样式）

  <div class="LeftR">
    <div class="leftround">  
    </div>
    <div class="LRText">
      <div class="LTNum">{{Arr.OSum}}<span style="font-size: 0.2rem;">/L</span></div>
      <span>加油总量</span>         
    </div>
  </div>    

 

.leftround{
   width: 1.6rem;
   height: 1.6rem;  
   border-radius: 1rem; 
   background: linear-gradient(0deg, #36A5ED 0%, #fd4d4d 100%);
   -webkit-mask: radial-gradient(transparent, transparent 0.75rem, #000 0.75rem);
   mask: radial-gradient(transparent 0.75rem, #000 0.75rem); 
   position: relative;
   z-index: 5;
 } 

最主要的就是  mask 属性，即遮罩属性

• 它可以用于隐藏或部分隐藏一个元素的可见区域，类似于PS中的遮罩概念
• 对于遮罩
  • 如果元素添加了遮罩属性，那么目标元素将会按照遮罩的形状来显示
    • 遮罩透明的区域，元素也会透明，即该区域被隐藏
  • 通常，遮罩可以是透明的图片或者是带渐变的元素
• 属性值：
  • mask-image
  • mask-repeat
  • mask-position
  • mask-clip
  • mask-origin
  • mask-size
  • mask-mode
  • mask-composite

参考链接：【CSS】mask遮罩 - 掘金 (juejin.cn)

 这里面有mask与到动画的结合：简单说 CSS中的mask—好好利用mask-image_盏茶作酒的博客-CSDN博客