CSS 绘制中间透明的圆形

<div class="area1">
  <div class="circle"></div>
</div>

<style>
  .area1 {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 12px #7bc6f7;
  }
</style>

以上代码的最终展示效果:

---