圆圈数字显示为椭圆的主因是宽高不等，而非border-radius错误；需确保width与height相等、使用box-sizing:border-box、配合text-align/line-height或flex居中，响应式可用aspect-ratio:1。
圆圈数字做不出来，大概率不是 border-radius 写错了，而是宽高根本没相等——这是最常卡住人的地方。
为什么 border-radius: 50% 画出来是椭圆？
因为这个值的意思是「水平方向圆角半径 = width / 2，垂直方向 = height / 2」。只要 width 和 height 不等，就必然椭圆。
常见错误包括：
- 只设
width: 40px，没设height，靠文字撑开高度 → 实际height可能是 22px - 用
line-height撑高但忘了display: inline-block或block→ 行内元素无视height - 加了
padding或border却没设box-sizing: border-box→ 实际尺寸超预期
固定尺寸场景：显式设置等宽高等值
兼容性最好（IE9+），语义清晰，适合按钮、徽标、状态标签等明确大小的场景。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
width和height必须数值+单位完全一致，比如都写24px - 用
display: inline-block或flex容器保证元素可设高宽 - 数字居中靠
text-align: center+line-height等于容器高度（仅适用于单行） - 加
box-sizing: border-box，避免border或padding导致溢出
示例：
.circle-num {
width: 24px;
height: 24px;
display: inline-block;
border-radius: 50%;
background: #007bff;
color: white;
text-align: center;
line-height: 24px;
font-size: 12px;
box-sizing: border-box;
}
响应式场景：用 aspect-ratio: 1 动态保比例
现代方案（Chrome 88+、Firefox 89+、Safari 15.4+），不用硬编码像素，适合随父容器缩放的场景，比如导航项、卡片角标。
注意点：
- 只需设一个方向尺寸（如
width: 10vw），aspect-ratio: 1自动拉平高度 - 仍需
border-radius: 50%，不能省略 - 数字居中建议改用
display: flex+justify-content/align-items，比line-height更稳 - 老浏览器（如 IE、旧 Edge）不支持，降级方案得 fallback 到固定尺寸
示例：
.circle-num-responsive {
width: 8vw;
aspect-ratio: 1;
border-radius: 50%;
background: #28a745;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: clamp(10px, 2.5vw, 14px);
}
数字内容长度不可控时怎么处理？
比如要显示 1、12、123，又不想让圆圈被撑变形——这时候不能依赖内容撑高宽，得靠布局控制。
推荐做法：
- 用
min-width+min-height设最小圆尺寸，再配合aspect-ratio: 1保形 - 字体用
font-size: clamp()或媒体查询动态缩放，避免小圆里塞大数字 - 长数字（如四位以上）建议截断或换行，否则会溢出或挤压圆弧
- 避免对
span类元素直接设height，它默认是行内元素，设高无效
真正容易被忽略的是：圆圈数字不是“画个圈再填数”，而是“先稳住容器比例，再居中内容”。一旦宽高失衡，所有居中逻辑都会失效。
