CSS怎样做出自适应圆形边框？

Question

想做这样一个未处理订单提醒的数字提示 想让它始终居中 边框是圆形的
现在这样写的话宽度可以随着数字长度自适应 但是怎样才能做出自适应圆形边框呢？

<view class="yuncang2">
    2222
</view>

.yuncang2{
  position: absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid red;
  top: 20rpx;
  color: red;
}

Answer 1

这个是不是你要的效果？根据文字长度自动变化圆的大小?
css代码

.box{
            display: inline-flex;
            justify-content: center;
            position: absolute;
        }
        .box1{
            padding-top: calc(100% + 20px);
            visibility: hidden;
            min-width: 12px;
            min-height: 12px;

        }
        .box2{
            position: absolute;
            padding-top: calc(100% + 20px);
            width: calc(100% + 20px);
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid red;
            border-radius: 50%;
        }
        .box3{
            position: absolute;
            text-align: center;
            top: 50%;
            transform: translateY(-50%);
        }

html代码

<div class="box">
    <div class="box1">2</div>
    <div class="box2">
        <div class="box3">2</div>
    </div>
</div>

这里 保持 box1 和 box3中的 文本内容一致即可。