border-radius: 50% 单独作用于 img 不保证真圆形，必须同时满足：宽高数值相等、启用裁剪机制（现代浏览器默认裁剪，旧版需 overflow: hidden 容器）、图片原始比例匹配或配合 object-fit: cover。
border-radius: 50% 单独写在 img 上，大概率不会得到真圆形——它只是“画了个圆角边框”，裁不裁内容、圆不圆，取决于宽高是否相等、是否启用裁剪机制、图片原始比例和渲染环境。
为什么加了 border-radius: 50% 图片还是方的或椭圆？
根本原因不是 CSS 写错了，而是 border-radius 本身不强制裁剪内容，它只定义可视区域边界形状。浏览器是否真正隐藏溢出部分，要看以下条件是否满足：
-
width和height必须数值相等（如120px和120px），不能是width: 100%+height: auto，否则长宽比浮动，50%就变成按宽高分别计算的椭圆半径 - 若直接作用于
img标签，现代浏览器（Chrome 4+、Firefox 4+、Safari 5.1+、Edge）默认会裁剪图像内容；但旧版 Safari 或 Android WebView 中可能失效 - 若作用于父容器（如
div），必须显式加overflow: hidden，否则图片照常溢出 - 非正方形原图（如 600×400）直接套
border-radius: 50%，结果一定是椭圆——因为半径按各自方向的 50% 计算
img 标签上直接用 border-radius: 50% 的前提条件
想省一层 DOM、直接操作 img，必须同时满足：
- 设置固定且相等的
width和height（推荐用px或em，避免百分比/响应式值） - 加上
object-fit: cover（防止拉伸变形）和display: block（消除行内元素默认下间隙） - 确保图片加载完成前容器不塌陷——可加
min-height或占位背景色 - 不要依赖
transform: scale()缩放后设圆角，高倍屏下边缘易发虚或锯齿
示例：
立即学习“前端免费学习笔记（深入）”；
<img src="avatar.jpg" alt="user" style="max-width:90%">
邮件场景下必须用内联样式，且不能依赖 object-fit
Gmail、Outlook Web 等主流邮件客户端会剥离 <style></style> 块，并忽略绝大多数 CSS 属性（包括 object-fit、overflow、clip-path）。此时唯一可靠路径是：
- 提前把图片处理成正方形（如 200×200），再用
width属性 + 内联border-radius: 50% - 用
width="200"（HTML 属性），而非style="width:200px"——部分客户端对后者解析不稳定 - 禁用
object-fit：它在邮件中基本无效，留白或拉伸只能靠服务端预处理解决 - 避免类名（如
class="avatar"）配<style></style>，Gmail 会直接删掉整段<style></style>
正确写法：
<img src="avatar-200x200.jpg" style="max-width:90%" alt="user" style="border-radius: 50%;">
复杂场景优先用容器包裹 + overflow: hidden
当需要兼容老浏览器、动态尺寸、或与动画/伪元素配合时，套一层 div 是最稳方案。它把裁剪逻辑从图片自身解耦出来，也方便加边框、阴影、状态覆盖层。
- 容器设固定正方形尺寸 +
border-radius: 50%+overflow: hidden -
img设width: 100%+height: 100%+object-fit: cover，居中裁剪 - 若需响应式，用
padding-bottom: 100%+height: 0维持正方形比例（仅适用于div容器） - 慎用
clip-path: circle()：IE 不支持，Safari 滚动中动画卡顿，且无法 fallback
关键点：这个模式里，border-radius 和 overflow: hidden 缺一不可——漏掉任一个，都会看到直角或溢出。
