border-radius: 50% 加了仍是方的，根本原因不是CSS写错，而是未满足正圆三要素：容器宽高相等、overflow: hidden（或现代浏览器对img的隐式裁剪）、图片尺寸匹配且用object-fit: cover居中截取。
border-radius: 50% 为什么加了还是方的？
不是 CSS 写错了，而是 border-radius: 50% 本身不裁剪内容，它只定义“可视区域形状”。浏览器默认不会自动隐藏溢出部分——尤其当图片原始尺寸不匹配、或父容器没设 overflow: hidden 时，四个直角依然露在外面。
- 必须同时满足：容器宽高相等 +
border-radius: 50%+ 裁剪生效（靠overflow: hidden或现代浏览器对<img alt="HTML头像图片怎么自适应切圆？圆形头像设置方法" >的隐式裁剪） - 只给
<img alt="HTML头像图片怎么自适应切圆？圆形头像设置方法" >加border-radius: 50%，但没设width和height，或只设一个，结果必然是椭圆 - 旧版 Safari / Android WebView 对
<img alt="HTML头像图片怎么自适应切圆？圆形头像设置方法" >的隐式裁剪不可靠，建议统一用容器包裹
非正方形头像怎么切出真圆？
用户上传的头像几乎全是矩形（比如 600×400），直接套 border-radius: 50% 会先拉伸再切，脸就变形了。关键不是“让图片变圆”，而是“在正方形区域内居中截取主体”。
- 用
<div> 包裹：<code>width和height设为相同值（如100px），加border-radius: 50%和overflow: hidden -
<img alt="HTML头像图片怎么自适应切圆？圆形头像设置方法" >设width: 100%; height: 100%; object-fit: cover;—— 这句不能省，否则原图比例错乱 - 可加
object-position: center 10%;微调垂直偏移，把面部往上提一点，更符合人眼视觉中心 - 现代方案：
aspect-ratio: 1 / 1替代固定宽高，配合border-radius: 50%和object-fit: cover - 兼容旧浏览器（如 Safari ≤15.3）：用
padding-bottom: 100%+height: 0+position: relative容器，<img alt="HTML头像图片怎么自适应切圆？圆形头像设置方法" >绝对定位填满 - 避免在 Flex/Grid 布局中让父容器强制拉伸子项（比如
align-items: stretch），会破坏正方形比例 - 适用场景：需要精确控制圆心位置（如
circle(60px at 60px 60px)），或容器尺寸动态不可控 - 慎用场景：需兼容老旧 iOS、邮件模板、WebView 内嵌页
- 若选用，务必配
overflow: hidden防边缘溢出，并避免和transform: scale()叠加
响应式圆形头像怎么写才不崩？
用 width: 100%; height: auto 是常见陷阱：高度失控 → 宽高不等 → 圆角变椭圆。响应式的核心是锁住宽高比，不是放任自流。
clip-path: circle() 值得上吗？
它能绕过“必须正方形容器”的限制，对任意尺寸图片都稳定输出内切圆，但代价明确：Safari ≤13.0 不支持百分比半径，Gmail/Outlook 等邮件客户端完全不解析，且边缘可能因亚像素渲染发虚。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：所有 CSS 方案（border-radius、clip-path）都只是视觉遮罩，原始图片仍是矩形。截图、打印、放大查看时圆角可能消失；如果后端需要真·圆形图片文件，必须用 <canvas></canvas> 导出。
