圆形头像需同时满足四个条件：正方形容器、border-radius: 50%、overflow: hidden、object-fit: cover；缺一不可，否则会出现变形、偏移、白边或裁切失效等问题。
为什么 border-radius: 50% 单独用有时不圆？
因为圆形头像本质是「让图片在容器内等比缩放并裁切」，只加 border-radius: 50% 只是把容器边框变圆，如果图片本身宽高不等、没居中、或溢出没截断，视觉上还是椭圆或偏移的。关键不是“圆角”，而是“圆形容器 + 内容严格居中 + 溢出裁剪”。
常见错误现象：
– 图片被拉伸变形
– 头像只显示左上角一部分
– 圆角边缘出现白边或锯齿
– 在 Safari 或旧版 Android 上失效
- 必须确保容器是正方形（
width和height相等） -
border-radius: 50%才能真正生成正圆，否则是椭圆 - 图片需用
object-fit: cover保证等比缩放并填满容器 -
overflow: hidden不可省略——它才是真正“裁掉多余部分”的动作
overflow: hidden 是必须的，不是可选项
没有 overflow: hidden，哪怕容器是正圆、图片也设了 object-fit: cover，一旦图片原始比例和容器不一致，多余部分仍会撑出圆角外，导致边缘漏出、背景透出，甚至破坏布局流。
特别注意：
– Flex/Grid 容器里子元素溢出默认不隐藏，必须显式加 overflow: hidden
– 使用 background-image 的写法时，overflow 对背景无效，此时必须换用 <img> 标签 + object-fit
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden在所有现代浏览器中稳定支持，包括 iOS Safari 9+ - 不要用
clip-path: circle()替代——性能差、SSR 不友好、打印时可能丢失 - 若容器有 border 或 box-shadow，
overflow: hidden也会裁掉它们的绘制区域，需确认是否符合设计预期
完整可用的 CSS 头像类写法
下面这段是生产环境验证过的最小可靠组合，兼顾语义、响应式和兼容性：
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
background-color: #eee;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
使用场景说明：
– 固定尺寸头像（如评论列表）直接复用该 class
– 响应式头像建议用 aspect-ratio: 1 / 1 替代固定宽高（但注意 IE 和旧安卓不支持）
– 若需支持 IE11，改用伪元素 + background-image 方案，但必须放弃 object-fit，改用 background-size: cover + background-position: center
- 务必给
<img>加display: block，避免底部默认留白（inline 元素基线对齐导致） - 不要依赖父容器的
font-size: 0清空间隙——不可靠且影响可访问性 - 如果头像来自用户上传，建议服务端统一裁成正方形，前端样式压力更小
容易被忽略的细节：图片加载失败时的 fallback
当 <img> 加载失败，alt 文本不会显示在圆形容器里（因为 object-fit 和 overflow: hidden 共同作用），视觉上只剩一个空圆。这时候需要主动处理降级。
- 用
<img>的onerror属性回退到占位图标或首字母：onerror="this.src='fallback.svg'" - 或者用 CSS
::after伪元素叠加文字 fallback（需配合position: relative） - SVG 占位图记得设置
viewBox并用width/height: 100%，否则缩放会失真
圆不是画出来的，是“框住再切掉”出来的。每一步都少不得：正方形容器、border-radius: 50%、overflow: hidden、object-fit: cover。漏掉任意一个，就只是个看起来像圆的漏洞。
