html圆形边框怎么弄,CSS怎样做出自适应圆形边框？

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

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代码

2

2

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