border-radius: 50% 只有在元素宽高相等时才是正圆；若宽高不等（如400×300图片未设正方形容器），则呈现椭圆。需显式设置相等宽高、配合object-fit: cover或overflow: hidden+父容器裁剪，兼顾兼容性与响应式。
border-radius: 50% 为什么有时不是正圆？
因为 border-radius: 50% 是按盒模型的宽高比例算的——只有当元素宽高相等时，它才是正圆。如果图片本身是矩形（比如 400×300），又没强制设成正方形盒子，那头像就会被压成椭圆。
- 必须确保容器（或图片自身）是正方形：
width和height值完全一致 - 图片用
object-fit: cover防止拉伸变形，同时居中裁切 - 别依赖图片原始尺寸，显式设置宽高更可靠
img.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}
img 标签直接加 border-radius 有兼容性问题吗？
现代浏览器都支持，但老版本 Android Webview（≤4.3）和 IE ≤11 对 img 的 border-radius 裁剪不彻底，常出现边缘溢出、锯齿或背景色泄漏。
- 稳妥做法：把
img包在div里，对父容器设border-radius+overflow: hidden - 这样兼容性更好，且避免某些安卓机上
object-fit失效导致的裁剪错位 - 注意父容器要设
display: block，否则可能因 inline 默认行为留白
<div class="avatar-wrap">
@@##@@
</div>
.avatar-wrap {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
display: block;
}
圆形头像需要响应式缩放怎么办？
用固定像素值（如 64px）在小屏上会显得太大，但直接用 % 或 em 又容易受上下文影响失衡。
- 推荐用
vw结合max-width控制上限，比如width: 12vw; max-width: 80px; - 避免只用
rem，除非你全局字体大小严格可控；移动端vh/vw更直观 -
border-radius保持50%即可，它始终按当前盒尺寸计算，无需随缩放调整
background-image 方式做圆形头像要注意什么？
用 background-image 替代 img 标签时，border-radius 能生效，但默认背景图会平铺或拉伸，容易糊或偏移。
- 必须加
background-size: cover和background-position: center - 别忘了
background-repeat: no-repeat，否则小图可能重复显示 - 语义化较弱，SEO 和无障碍支持差；仅适合装饰性头像（如评论列表侧边图标）
.avatar-bg {
width: 56px;
height: 56px;
border-radius: 50%;
background-image: url("...");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
实际项目里最容易漏的是：容器没设宽高就直接写 border-radius: 50%，或者忘了 object-fit 和 overflow: hidden 的组合兜底。这两个点一缺，上线后在不同设备上大概率出视觉 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
