直接给加border-radius: 50%不能保证正圆，必须同时满足宽高相等（如120px）、object-fit: cover防拉伸、display: block消除底部间隙，现代浏览器才默认裁剪生效。
直接给 <img> 加 border-radius 就能出圆角，但只写 border-radius: 50% 很大概率不是正圆——关键在宽高是否相等、是否启用裁剪、原始图比例是否匹配。
为什么加了 border-radius 图片还是方的？
不是 CSS 写错了，是浏览器没真正裁掉多余部分。常见原因有三个：
-
<img>没设固定width和height，比如只写了width: 100%，高度由图片原始比例撑开 →border-radius: 50%按宽高分别算半径，结果是椭圆 - 父容器（比如
<div>）设了 <code>overflow: hidden，但你把border-radius错加在了<img>上 —— 圆角画在图片上，裁剪却发生在父层，视觉上“没反应” - 用了
object-fit: cover但没配等宽高容器，图片被拉伸填满后，圆角作用于变形后的边界，边缘看起来仍生硬 -
width和height必须数值相等（不能用%或auto） -
object-fit: cover防止非正方形原图被拉伸，而是居中裁剪 -
display: block消除内联元素默认的底部间隙 - 现代浏览器（Chrome 4+、Firefox 4+、Safari 5.1+、Edge）对
<img>默认裁剪内容，无需额外overflow: hidden -
border-radius: 8px：四角统一 8px，适合卡片图、头像边框 -
border-radius: 12px 0 12px 0：只切左上和右下，顺时针顺序是 top-left → top-right → bottom-right → bottom-left - 别混用单位，比如
border-radius: 4px 50%，部分浏览器解析异常，尤其在 Flex/Grid 容器里容易失准 - 如果父容器用了
transform或will-change，旧版 Chrome 下overflow: hidden可能失效，此时退回直接操作<img>更稳 - 服务端提前把图片处理成正方形（如 200×200），再用内联样式：
<img src="a.jpg" style="max-width:90%" style="border-radius: 50%;"> - 避免用
clip-path或 SVG 裁剪——代码复杂、兼容性更差、邮件客户端基本不认 - 别依赖响应式尺寸：
max-width: 100%在邮件里常被重置，固定像素值最保险
怎么确保图片真变圆形？
必须同时满足三个条件：正方形显示区域 + 强制居中裁剪 + 浏览器默认裁剪生效。推荐写法：
<img src="avatar.jpg" style="max-width:90%">
想做圆角矩形（不是正圆）怎么办？
用具体像素值更可控，避免百分比带来的不确定性：
邮件或老系统里圆角不生效？
Gmail、Outlook Web 等会忽略 object-fit，甚至不支持 border-radius（IE9 以下完全不支持）。这时唯一可靠路径是：
最容易被忽略的是：圆角不改变图片本身的可访问性尺寸或点击热区，但若用 transform 缩放或偏移，热区可能错位，得额外测试交互范围。
