直接设置 border-radius: 50% 即可实现圆形头像，但必须确保图片宽高相等、无拉伸变形，推荐配合 width/height 固定值或 aspect-ratio: 1/1、object-fit: cover 和 overflow: hidden 使用。
用 border-radius 实现头像圆形最直接
只要图片是正方形（宽高等比），border-radius: 50% 就能稳稳切出圆形。不是正方形？浏览器会按宽高最小值的一半取圆角半径，结果变成椭圆或“胖圆”，得先保证尺寸一致。
常见错误：直接给 <img> 加 border-radius: 50%，但父容器没限制宽高，或者图片被拉伸变形。解决办法是显式设置 width 和 height，且值相等：
<img src="avatar.jpg" style="width: 80px; height: 80px; border-radius: 50%;">
- 必须同时设
width和height，不能只设一个（否则比例失衡） - 推荐用
px、rem等固定单位，避免用%（父容器不一定是正方形） - 如果图片源本身非正方形，
object-fit: cover能帮它居中裁剪填充
object-fit: cover 防止头像被拉伸变形
原始头像图常是矩形（比如 400×600），硬套 border-radius: 50% 会先拉成正方形再切圆，脸就变宽了。加 object-fit: cover 后，图片会等比缩放并居中裁剪，只保留中间正方形区域。
注意：这个属性只对替换元素（如 <img>、<video>）生效，且需要配合明确的宽高才起作用：
立即学习“前端免费学习笔记（深入）”；
<img src="avatar.jpg" style="width: 64px; height: 64px; border-radius: 50%; object-fit: cover;">
- 不加
object-fit→ 图片被强制拉伸，五官扭曲 - 加了但没设宽高 →
object-fit不触发，行为退化为默认拉伸 - 若需兼容 IE，得换方案（比如用
<div>+background-image）
用 background-image 方案兼容老浏览器
IE11 及更早版本不支持 object-fit，但支持 background-image 和 border-radius。此时把头像当背景图塞进 <div>，靠 background-size: cover 达到类似效果：
<div style="
width: 64px;
height: 64px;
border-radius: 50%;
background-image: url('avatar.jpg');
background-size: cover;
background-position: center;
"></div>
- 必须设
background-position: center，否则人脸可能偏左/偏上 - 无法通过 JS 直接读取图片自然尺寸，后续做懒加载或错误 fallback 更麻烦
- 如果头像需响应点击事件，得额外加
tabindex="0"和键盘支持，不如原生<img>语义清晰
SVG 头像也能圆，但要注意 viewBox 和裁剪
用 SVG 当头像（比如动态生成的字母头像）时，border-radius 对 <svg> 标签本身无效——它只裁剪外框，不裁剪内部图形。真正生效的是 <clipPath> 或在 <svg> 内部用 circle 绘制圆形遮罩。
最简方式：让 SVG 自身是圆形，靠 viewBox 控制内容比例：
<svg viewBox="0 0 100 100" width="64" height="64"> <circle cx="50" cy="50" r="50" fill="#4a90e2"/> <text x="50" y="58" text-anchor="middle" fill="white" font-size="32">A</text> </svg>
- 别依赖外部
border-radius去“切” SVG，不可靠，尤其在不同缩放层级下 - 如果 SVG 是从外部引入（
<img src="icon.svg">），那它和 PNG 一样，得走object-fit+ 固定宽高路径 - 动态生成 SVG 头像时，优先在 SVG 内部定义圆形边界，而不是靠 CSS 二次裁剪
object-fit —— 看似写了 border-radius: 50%，结果上线后一堆椭圆头像。 
