border-radius: 50% 本身不保证圆形，仅当宽高严格相等且盒模型规范时才生效；不圆主因是尺寸未锁死、display/overflow未设、object-fit未配或图片含透明边缘。
直接说结论：border-radius: 50% 本身不会自动造出圆，它只在**宽高严格相等的块级容器**里才生效；不圆，90% 是因为尺寸没锁死、盒模型没理清，或图片内容没对齐。
为什么 border-radius: 50% 没变成圆？
根本原因不是 CSS 写错了，而是浏览器按真实盒模型计算：水平方向圆角半径 = width × 50%，垂直方向 = height × 50%。只要 width 和 height 不等，结果就是椭圆。
- 常见错误：只设
width: 80px，height留空或用auto，导致高度由图片撑开、不等于宽度 -
img默认是display: inline，底部会留白（基线对齐），视觉上“矮了一截”，实际高度 ≠ 设置值 - 父容器用了
padding或margin挤出“假正方形”，但border-radius只认width/height的计算值 - 响应式场景下用了
max-width: 100%却没同步控制高度，宽高比失守
img 标签加 border-radius: 50% 失效怎么办？
不是属性无效，是 img 的默认行为干扰了渲染。必须显式干预盒模型和内容适配。
- 给
img加display: block或display: inline-block，消除行内元素的基线留白 - 必须同时设置
width和height，且数值完全一致（如都为64px），不能一个用px、一个用em - 加
object-fit: cover防止图片拉伸，再加object-position: center确保人脸居中（尤其原图非正方形时） - 父容器建议加
overflow: hidden作为兜底裁剪，避免object-fit在旧浏览器降级失效时内容溢出
响应式圆形头像怎么写才可靠？
固定像素值（如 64px）在小屏上太大，纯百分比又易受上下文影响。现代方案优先用 aspect-ratio，它比 padding-top hack 更语义清晰、更易维护。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
width: 100%; max-width: 64px; aspect-ratio: 1 / 1;—— 宽度自适应，高度由宽高比锁定 - 兼容性注意：
aspect-ratio在 Safari 15.4+、Chrome 88+、Firefox 89+ 支持良好；若需支持 Safari ≤15.3，可降级为padding-top: 100%+position: relative容器 + 绝对定位子元素 - 小尺寸头像（≤24px）务必用偶数像素值（如
24px而非23px），减少高 DPI 屏幕下的抗锯齿模糊 - 避免在圆形元素上叠加
box-shadow和transform动画，旧版 Safari 和部分 Android WebView 会出现“闪方”——动画中间帧临时关闭圆角渲染
真正难的不是写那行 border-radius: 50%，而是从盒模型、图片适配、响应式、兼容性四个层面同时守住“宽高等比”这个底线。漏掉任意一环，圆就塌了。
