用 aspect-ratio 实现圆形标签需兼顾文字自适应与兼容性：设 aspect-ratio: 1/1 和 border-radius: 50%，配合 font-size clamp()、flex 居中、box-sizing: border-box，并为旧浏览器降级使用 padding-top: 100% 或固定尺寸。
用 aspect-ratio 做圆形标签，前提是内容能缩放
直接给容器设 aspect-ratio: 1 / 1 + border-radius: 50% 确实能出圆，但文本溢出或换行会撑破形状。关键不是“怎么画圆”，而是“怎么让文字不破形”。font-size 得随容器宽高联动，否则小屏上字会挤出边界，大屏上又太小看不清。
- 必须限制内容长度（比如最多 3 个汉字或 2 个英文单词），否则再好的 CSS 也救不了布局
-
white-space: nowrap+overflow: hidden+text-overflow: ellipsis是保底组合，但仅对单行有效 - 真要支持多字自适应，得配合
clamp()：比如font-size: clamp(0.5rem, 2.5vw, 1.125rem)，让字号在最小/最大值间随容器缩放
IE 和旧版 Safari 不支持 aspect-ratio，得有降级方案
aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 才稳定支持。iOS 15.4 之前、所有 IE 版本都会忽略它，导致标签变成长方形甚至塌陷。不能只写一个声明就以为万事大吉。
- 降级用
padding-top: 100%的伪元素方案：父容器position: relative，子元素position: absolute覆盖，靠top: 0; left: 0; width: 100%; height: 100%撑开 - 或者改用
width+height固定值（如2rem），再配font-size: 0.75rem，牺牲自适应换兼容性 - 检查时别只看 Chrome，用 Safari 技术预览版或 iOS 真机测试，
aspect-ratio在某些 Safari 小版本里存在计算偏差
文字居中不是加 text-align: center 就完事
圆形标签里文字视觉居中，光靠水平居中远远不够——字体的 ascent 和 descent 会让它看起来偏上。尤其用无衬线字体（如 -apple-system）时更明显。
- 必须搭配
display: flex+align-items: center+justify-content: center - 如果用了
line-height做垂直居中，要注意它和font-size的比例关系：当font-size缩小时，line-height若写死数值（如line-height: 2）会导致行距过大，压扁文字 - 推荐统一用
line-height: 1，再靠 flex 补足，避免隐式继承干扰
带边框的圆形标签，box-sizing 必须是 border-box
加了 border 后，如果 box-sizing 是默认的 content-box，那 width/height 或 aspect-ratio 计算的只是内容区，边框会额外扩张，圆就歪了，还可能触发横向滚动条。
立即学习“前端免费学习笔记（深入）”；
- 所有圆形标签容器都应显式声明
box-sizing: border-box - 如果用了
outline替代border（比如为了聚焦样式），注意outline不占布局空间，不会影响圆度，但也不参与点击热区——需额外加padding补偿 - 阴影（
box-shadow）不影响尺寸，但若用了inset阴影，要确认是否遮挡文字，特别是小尺寸下
真正难的不是写出那个 aspect-ratio: 1 / 1，而是判断什么时候该放弃它——比如内容不可控、要兼容微信内置浏览器（X5 内核）、或者设计师要求圆角带渐变边框。这时候硬套 CSS 新特性反而增加维护成本。
