如何实现一个自适应大小的圆？？？

首先看效果图，一个可以根据文字内容长度自动撑开的圆。

这个需求是我在项目开发中实际遇到过的，需求效果类似于有许多泡泡，每个泡泡里面都有一串数字，泡泡大小是不固定的，是根据数字的位数去确定大小的。 刚看到这个需求，脑海里第一想法就是简单，直接border-radius: 50%;搞定，然后就出现了下图的情况。

因为我们的文字是横向撑宽的，高度不变，所以会出现椭圆形这个情况。

所以我们要解决这个情况，就是要让高度跟宽度一样大小，但是我们的宽度却又是不确定的。最终想到用padding实现，因为padding百分比的话是根据元素宽度去比的。 padding的百分⽐是相对于⽗元素宽度，如果⽗元素有宽度，相对于⽗元素宽度，如果没有，找其⽗辈元素的宽度，均没设宽度时，相对于屏幕的宽度。 所以我们可以把元素高度设置为0，然后给padding: 50% 0;去撑开。

<div class="circle">圆</div>
.circle{
  padding: 50% 0;
  height: 0;
  line-height: 0;
  border-radius: 50%;
  text-align: center;
  background: red;
  font-size: 36px;
  color:#fff;
}

然后就出现了一个非常大的圆，因为我们没给父元素（刚刚说了padding的百分⽐是相对于⽗元素宽度），所以外面套上一个box。宽度给fit-content。颜色让外层box控制就行，所以circle的背景色改为transparent。

<div class="box">
  <div class="circle">圆</div>
</div>

.box{
  display: inline-block;
  width: fit-content;
  border: 20px solid transparent;
  border-radius: 50%;
  background: red;
  .circle{
      padding: 50% 0;
      height: 0;
      line-height: 0;
      border-radius: 50%;
      text-align: center;
      background: transparent;
      font-size: 36px;
      color:#fff;
    }
}

最后，如果我们想让圆跟文字有一点距离，只需要给个透明颜色border就可以实现了。 OK~!!~搞定！