设置 border-radius: 50% 仍呈椭圆，根本原因是元素宽高不等；需确保容器宽高等值、使用 overflow: hidden 裁剪，并配合 object-fit: cover 或 background-size: cover 防止内容变形。
直接用 border-radius: 50% 就能实现，但实际中常因盒模型、宽高不一致或图片拉伸导致“看起来不是正圆”
为什么设置了 border-radius: 50% 还是椭圆？
根本原因是元素本身不是正方形——border-radius: 50% 是按宽度和高度分别计算的：水平方向取宽的一半，垂直方向取高的一半。若 width 和 height 不等（比如 width: 100px; height: 80px），结果就是椭圆。
- 确保容器宽高等值：显式设置
width和height相同，例如都为120px - 避免使用
max-width或height: auto等导致高宽脱钩的写法 - 如果用
img标签，记得加width: 100%; height: 100%; object-fit: cover;防止图片变形或留白
用 img 做头像时的关键 CSS 组合
单独给 img 加 border-radius: 50% 很容易失败，因为图片原始尺寸和父容器不匹配，推荐包裹一层容器并控制裁剪逻辑：
<div class="avatar"> <img src="head.jpg" alt="头像"> </div>
对应样式：
立即学习“前端免费学习笔记（深入）”；
.avatar { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; }.avatar img { width: 100%; height: 100%; object-fit: cover; }
其中 overflow: hidden 是关键：它确保即使图片比例不对，也会被容器硬裁成圆；object-fit: cover 保证图片居中缩放、不拉伸。
用背景图方式实现更稳定的圆形头像
当无法修改 HTML 结构（比如只能改 CSS），或需要适配响应式场景时，用 background-image 更可控：
- 把图片设为元素背景，而非
img标签 - 必须同时设置
background-size: cover和background-position: center - 元素仍需是正方形，并加
border-radius: 50%
示例：
.avatar-bg {
width: 80px;
height: 80px;
border-radius: 50%;
background-image: url('head.jpg');
background-size: cover;
background-position: center;
}
兼容性与移动端注意点
border-radius: 50% 在所有现代浏览器包括 iOS Safari 和 Android Chrome 中都没问题，但有两个实际坑：
- 旧版 Android WebView（4.3 及以下）对
border-radius裁剪img支持不完整，必须用容器 +overflow: hidden方案 - 在微信内置浏览器里，如果父容器用了
transform（如缩放或 3D），可能破坏border-radius的渲染，此时也应回退到overflow裁剪
真正要花时间调的，往往不是 border-radius 本身，而是让它的作用对象——那个盒子——始终是正方形且内容不溢出边界。
