border-radius: 50% 不圆的根本原因是元素宽高不等，它仅在宽高等于的正方形容器中生成正圆；需配合 overflow: hidden、object-fit: cover 及显式等宽高设置才能实现完美圆形头像。
为什么 border-radius: 50% 有时不圆？
直接写 border-radius: 50% 不一定得到正圆——它只对「宽高等于」的元素生效。如果图片本身是矩形（比如 400x300），加了 border-radius: 50% 也只是椭圆边框，不是头像框。
关键不是“加圆角”，而是“先做成正方形容器，再裁切”。常见做法是用一个 <div> 包住 <img>，并强制该 <div> 宽高相等、overflow: hidden：
<div class="avatar"> <img src="photo.jpg" alt="头像"> </div>
对应 CSS：
.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover; /* 关键：等比缩放并填满，避免拉伸或留白 */
}- 不用
object-fit: cover时，图片可能被压缩变形，或上下/左右留白 - 如果图源尺寸太小（如
60x60），在大容器里会模糊，建议原图至少240x240（适配 2x 屏） - 不要只给
<img>加border-radius，因为图片外层常有默认 margin 或行内元素 baseline 对齐导致错位
如何让圆形头像响应式且居中显示？
固定像素（如 120px）在移动端容易撑破布局。更稳妥的是用相对单位 + aspect-ratio，并配合 Flex 布局居中：
立即学习“前端免费学习笔记（深入）”；
.avatar {
width: 80px;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}-
aspect-ratio: 1 / 1比手动设height: 100%更可靠，尤其在父容器高度未定的情况下 - 用
margin: 0 auto居中仅对块级元素有效；若父容器是 Flex，则直接用justify-content: center - 避免用
vertical-align: middle处理行内图片——它依赖基线，行为不稳定
IE 浏览器下 border-radius: 50% 不生效怎么办？
IE9+ 支持 border-radius，但 IE8 及更早版本完全不支持，且不支持 aspect-ratio 和 object-fit。若必须兼容 IE8，得换方案：
- 用
<img>的clip-path（IE 不支持）→ 不可行 - 改用背景图 +
background-size: cover+background-position: center，再套一层带border-radius的容器（IE9+ 可用） - 最兼容的做法：服务端生成圆形 PNG 头像（带透明背景），前端直接用
<img>显示——绕过所有 CSS 裁剪问题
现代项目基本可忽略 IE8，但若需支持 IE9–10，确保不依赖 object-fit，改用 JS 补丁（如 object-fit-images 库）或降级为背景图方案。
头像框加边框或阴影时要注意什么？
加 border 或 box-shadow 很常见，但容易破坏圆形效果：
-
border会增加元素总尺寸，若没重算宽高，可能导致圆变椭圆或溢出；推荐用outline（不占布局空间）或把border算进width/height里（box-sizing: border-box） -
box-shadow默认不影响形状，但若用了inset阴影，要小心遮挡内容边缘 - 双层边框（如外发光+内描边）建议用伪元素实现，避免多层
box-shadow性能开销
例如带 2px 白边和柔和阴影的写法：
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
border: 2px solid #fff;
box-sizing: border-box;
}实际做头像框，最难的不是加 border-radius: 50%，而是控制图片在正方形容器里的裁剪位置和清晰度——object-fit 和原图分辨率才是影响最终效果的关键变量。
