css实现：不固定宽高，随内容宽度自动增长的圆形

    .circle {
      display: inline-block;
      border-radius: 50%;
      min-width: 20px;
      min-height: 20px;
      padding: 5px;
      background: red;
      color: white;
      text-align: center;
      line-height: 1;
      box-sizing: content-box;
      white-space: nowrap;
    }
    .circle:before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      padding-top: 100%;
      height: 0;
    }
    .circle span {
      display: inline-block;
      vertical-align: middle;
    }

<div class="circle"><span>8</span></div>
<div class="circle"><span>64</span></div>
<div class="circle"><span>512</span></div>
<div class="circle"><span>4096</span></div>
<div class="circle"><span>9999999999</span></div>

参考网址：html - CSS circle without using fixed width and height - Stack Overflow