border-radius: 50% 本身不保证出圆，仅当元素宽高严格相等、display设为block或vertical-align修正基线、配合object-fit: cover与object-position: center时，才能实现真正居中裁切的正圆形头像。
直接给 img 加 border-radius: 50% 不一定出圆——它只在宽高相等时才真正变圆，否则是椭圆；头像“不圆”的本质问题，从来不是属性写错，而是尺寸、盒模型或内容定位没控住。
border-radius: 50% 为什么有时还是椭圆？
浏览器按当前元素的 width 和 height 分别计算水平/垂直方向的圆角半径：50% 意味着「宽度的一半」和「高度的一半」。如果 width: 100px、height: 80px，结果就是 50px × 40px 的椭圆。
- 必须显式设置相等的
width和height（如都为64px），不能一个用auto或100% - 避免靠
padding-tophack 或父容器flex挤出“视觉正方形”——border-radius只认盒模型真实尺寸 - 响应式场景优先用
aspect-ratio: 1替代固定像素，但注意 Safari 15.4+ 才完全支持
img 标签加 border-radius 没效果？检查 display 和 overflow
img 默认是 inline 元素，行内对齐会引入底部空白（基线间隙），导致实际渲染高度略大于设定值，border-radius 裁切区域偏移，看起来“没圆”。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 给
img加display: block或vertical-align: top消除基线干扰 - 确保父容器有
overflow: hidden，否则超出圆区域的内容会溢出（尤其用object-fit: cover时） - 别用
line-height: 0或负margin强行压高度——这是治标不治本，且易破坏布局流
怎么让非正方形原图也居中裁出圆形人脸？
border-radius 只负责“裁边”，不管“裁哪”。原图宽高比 ≠ 容器宽高比时，必须靠缩放和定位控制焦点。
- 用
object-fit: cover（推荐）让图片等比缩放并填满容器，多余部分裁掉 - 显式加
object-position: center，避免某些浏览器默认偏上（尤其竖构图原图） - 如果用背景图方式：
background-size: cover+background-position: 50% 50%+background-repeat: no-repeat - 语义化要求高时别用背景图——
img支持alt、懒加载、srcset，背景图全丢
小尺寸头像（≤32px）边缘发虚怎么办？
这不是 CSS 写错了，是像素对齐问题：小尺寸下抗锯齿算法在非整数像素边界渲染模糊，尤其在 Retina 或 Windows 高缩放屏上明显。
- 头像尺寸尽量用偶数像素（如
24px、32px），避开23.5px这类半像素 - 可尝试
image-rendering: -webkit-optimize-contrast或image-rendering: crisp-edges强制像素级渲染（兼容性有限） - 高分辨率设备建议提供 2x 图源（
srcset），否则缩放后模糊更严重
真正难的不是画圆，而是让圆里刚好露出人脸——尺寸、缩放、定位三者缺一不可，漏掉任意一环，border-radius: 50% 就只是个好看的空壳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
