移动端圆形头像不圆的根本原因是宽高不等或缺失overflow: hidden；border-radius: 50%按width和height各自50%独立计算，宽高不等时必呈椭圆，必须同时满足正方形容器、border-radius: 50%、overflow: hidden及object-fit: cover才生效。
移动端圆形头像不圆，八成是宽高不等或漏了 overflow: hidden——这两点必须同时满足，border-radius: 50% 才真正生效。
为什么 border-radius: 50% 在移动端看起来是椭圆？
因为 CSS 的 border-radius: 50% 是分别按 width 和 height 各取一半来算的。宽高不等时，结果就是椭圆，不是圆。
- 检查容器是否设置了严格相等的
width和height（比如都用4rem，而不是width: 4rem; height: auto） - 避免用
%单位配合未设高度的父容器（如 flex 容器没设align-items或min-height），容易导致 height 塌陷 - 用
vw更稳妥：例如width: 12vw; height: 12vw;，再加max-width: 80px防止大屏过大
图片拉伸变形 or 留白？关键在 object-fit 和 display
img 默认是 inline 元素，底部有基线间隙，且不设 object-fit 时会拉伸或留白。
- 必须给
img加display: block消除空白 - 设
width: 100%; height: 100%，再配object-fit: cover实现等比缩放+居中裁切 - 人脸常偏上，建议显式写
object-position: 50% 40%，比默认50% 50%更保额头和眼睛 - 别依赖
height: auto——它会让容器随图片原始比例撑开，破坏正方形结构
安卓低版本 WebView 或 iOS 小尺寸模糊怎么办？
部分 Android 4.x WebView 和 iOS Safari 对非整数像素的 border-radius 渲染发虚，尤其 24px、32px 这类小尺寸。
- 优先用偶数像素值：如
width: 40px; height: 40px;，避开39.5px类计算结果 - 必要时加
transform: translateZ(0)强制 GPU 渲染（仅在确认模糊时启用，慎用） - 别用
border-radius: 999px或50.1%“取巧”——DPR > 1 时反而露馅 - 老内核（如某些 Hybrid App）不支持
object-fit，可降级为background-image+background-size: cover
最常被跳过的其实是三件事：容器宽高相等、overflow: hidden 写在同一元素上、img 的 display: block。尤其是 flex 布局里，height: 100% 经常没生效，结果头像还是方的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
