border-radius: 50% 不一定出圆形，因其仅对宽高等比元素生效；若图片为16:9横图，仅设该属性会得椭圆。需先确保显示区域为正方形（如设等宽高或正方形容器），再配合overflow: hidden与object-fit: cover裁剪居中。
为什么直接写 border-radius: 50% 不一定出圆形
因为 border-radius: 50% 只对「宽高等比的元素」生效。如果原始图片是 16:9 的横图，你只加这行 CSS，结果是个椭圆——浏览器按宽度的 50% 算圆角半径，但高度不够，上下被压扁了。
真正要出完美圆形，必须先确保显示区域是正方形，再裁剪。常见错误就是只给 img 加 border-radius，却不控制它的容器或尺寸。
- 必须显式设置
width和height相等（比如都设为200px或都用100%且父容器是正方形） - 或者用正方形容器包裹
img，再设overflow: hidden+object-fit: cover - 别依赖图片原始尺寸：用户上传的头像千奇百怪，不能假设它是正方形
object-fit: cover 配合正方形容器才是稳解
这是目前最可靠、兼容性好（IE11+）、语义清晰的方案。它不改变图片文件，只控制渲染方式：在固定正方形区域内，等比缩放并居中裁剪，露出中间最核心的部分。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="avatar-circle"> <img src="user.jpg" alt="头像"> </div>
对应 CSS：
.avatar-circle {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
}
.avatar-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
-
overflow: hidden必须写在容器上，不是img上 -
object-fit: cover是关键：它让图片填满容器且不拉伸，自动裁掉多余边缘 - 如果想适配响应式，把
width/height换成max-width: 100%+aspect-ratio: 1（现代浏览器），或用padding-bottom: 100%兼容旧版
响应式场景下如何避免小图被强行拉大模糊
用 width: 100% + height: auto 做响应式缩放时，如果图片本身只有 100×100 像素，放到 300×300 的圆形容器里就会像素化。这不是 CSS 能解决的，得靠资源供给层。
- 必须配合
srcset提供多尺寸版本，例如：srcset="avatar-120.jpg 120w, avatar-240.jpg 240w, avatar-480.jpg 480w" - 同时写
sizes="(max-width: 768px) 120px, 240px"，让浏览器知道这个圆形头像在不同断点下实际占多宽 - 千万别只靠
transform: scale(1.5)放大——它只是把已有像素拉伸，不会提升清晰度 - 服务端或构建工具应提前生成 1x/2x/3x 尺寸图，前端不现场缩放
什么时候该放弃 border-radius 改用 clip-path
clip-path: circle() 看似更“原生”，但它有几个硬伤：iOS Safari 15.4 之前不支持 circle() 的百分比参数；Android WebView 兼容性碎片化；而且无法和 object-fit 协同工作——一旦用了 clip-path，object-fit 就失效，图片会按原始比例溢出或留白。
- 仅当需要非中心圆形（比如偏移圆心）、或配合动画做形状过渡时才考虑
clip-path - 生产环境用它必须带降级：
border-radius: 50%作为兜底，clip-path后置覆盖 - 不要用
clip-path: polygon()做圆形模拟——性能差，且锯齿明显
真正的难点不在怎么写那几行 CSS，而在于你是否控制得了图片源：尺寸够不够、有没有多倍图、容器宽高是否可预测。很多“圆形不圆”的问题，最后都卡在后端返回的图片尺寸不可控，或者前端没做容器约束。先理清数据流，再动样式。
