头像不圆的主因是容器宽高不等且缺少overflow: hidden；必须确保width和height严格相等，并在同一元素上同时设置border-radius: 50%和overflow: hidden。
border-radius 50% 不圆？检查宽高是否相等
移动端头像变椭圆，八成是容器宽高不一致。CSS 的 border-radius: 50% 是按宽高各自取一半来算的，宽≠高时，裁出来就是椭圆。
- 必须确保头像容器（如
<img alt="CSS如何实现移动端圆形头像裁剪_利用border-radius与溢出隐藏" >或包裹它的<div>）的 <code>width和height数值严格相等 - 用
rem、vh或固定像素都行，但别一个用100px，另一个用100%且父容器高度不固定 - 如果用图片，记得设
img { display: block; width: 100%; height: 100%; object-fit: cover; }，否则拉伸变形 - 错误写法：
.avatar { border-radius: 50%; } .avatar img { overflow: hidden; }→ 无效 - 正确写法：
.avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; }，再把<img alt="CSS如何实现移动端圆形头像裁剪_利用border-radius与溢出隐藏" >放进去 - 注意：某些安卓低版本 WebView 对
overflow: hidden+border-radius组合支持不稳定，可加transform: translateZ(0)强制硬件加速 - 推荐用
rem：根字体大小设为font-size: 16px（或根据设计稿缩放），头像写width: 3rem; height: 3rem; - 或者用
vw：比如width: 15vw; height: 15vw;，适合全屏比例敏感场景 - 避免用
%配合不确定高度的父容器（如flex未设align-items: center），会导致高度塌陷 - 稳妥做法：用
background-image替代<img alt="CSS如何实现移动端圆形头像裁剪_利用border-radius与溢出隐藏" >标签，配合background-size: cover和background-position: center - HTML 结构变成：
<div class="avatar" style="background-image: url(xxx.jpg)"> <li>此时仍需保证容器宽高相等 + <code>border-radius: 50%+overflow: hidden，三者缺一不可
事情说清了就结束。最常漏掉的是
图片溢出不隐藏？overflow: hidden 必须加在容器上
border-radius 本身不裁剪内容，它只画圆角边框；真正起裁剪作用的是 overflow: hidden，而且它得加在**同一元素**上，不能只写在父级或子级。
适配不同设备像素比？用 rem 或 viewport 单位更稳妥
直接写 50px 在 Retina 屏上会显得小，而百分比又依赖父容器，容易失控。移动端头像尺寸建议脱离绝对像素依赖。
需要支持 IE？别用 object-fit，换 background-image 方案
IE 完全不支持 object-fit，而移动端虽不用管 IE，但有些 Hybrid App 的内嵌 WebView 内核老旧（如部分 Android 4.x 系统），也会出问题。
立即学习“前端免费学习笔记（深入）”；
overflow: hidden 和宽高相等这两个点，尤其在 flex 布局里，height: 100% 往往没生效，结果头像还是方的。
