CSS实现圆形内上下显示数值/总值时圆形变形问题求解

代码运行后圆形破裂变形，由以下问题共同导致：

• 盒模型计算偏差：默认content-box规则下，设置的36px固定宽高不包含8px内边距、2px边框，元素实际渲染尺寸远大于设定值，内容加载后很容易被挤变形
• 字体尺寸适配错误：32px的字体远大于36px的基础容器尺寸，两行文字直接将容器撑至超出预期大小
• 标签写法不规范：<br>为单标签无需闭合，多余的</br>会生成额外空行；使用<u>标签给数字加下划线既不符合上下数值中间分隔的样式需求，还会额外占用布局空间
• 元素类型适配问题：<span>默认为行内元素，直接设置宽高的生效逻辑不稳定

CSS代码 #

.kanban-circle{
    box-sizing: border-box;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    padding: 6px 0;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font: 16px Arial, sans-serif;
    line-height: 1.2;
}
.kanban-circle .current-num {
    border-bottom: 1px solid #666;
    padding-bottom: 2px;
    margin-bottom: 2px;
}

HTML代码 #

<span class="kanban-circle">
    <span class="current-num">90</span>
    <span class="total-num">100</span>
</span>

• 新增box-sizing: border-box属性，让内边距、边框都算在设定的固定宽高内，不会额外撑大容器
• 改用flex布局实现上下排列+双向居中，比br换行的布局稳定性高很多，不会出现错位
• 把字体调整到适配容器的尺寸，避免文字撑破圆形
• 用底部边框替代u标签的下划线，实现上下数字中间的分隔效果，更贴合参考样式
• 去掉了多余的br闭合标签，用独立span包裹上下两个数字，后续调整样式更方便

内容的提问来源于stack exchange，提问作者code maker