只加border-radius图片仍为方形，因其仅定义边框形状而不裁剪内容；必须同时满足宽高相等、启用overflow:hidden（作用于同一元素）或object-fit:cover，并处理行内间隙（display:block）。
为什么只加 border-radius 图片还是方的？
因为 border-radius 本身不裁剪内容，它只定义“可视区域边框形状”。就像给窗户装了圆角玻璃，但窗外的景（图片）仍是矩形——除非你关上窗框，否则四角照样露出来。常见错误现象包括：边缘溢出、四个角直挺、或变成压扁的椭圆。根本原因不是 CSS 写错，而是缺了关键约束：overflow: hidden 没加，或者宽高不相等。
overflow: hidden 必须加在哪儿？
加在和 border-radius 同一个元素上。如果作用于 <div> 容器，<code>overflow: hidden 就必须写在该 <div> 上；如果直接写在 <code><img> 上，现代浏览器（Chrome 4+、Firefox 4+、Safari 5.1+）会默认裁剪，但旧版 Safari 或 Android WebView 中可能失效，所以更稳妥的是用容器方案。
- ✅ 推荐：
<div style="width: 120px; height: 120px; border-radius: 50%; overflow: hidden;"><img src="..." style="max-width:90%"></div> - ❌ 错误：只给
<div> 加 <code>border-radius却漏掉overflow: hidden - ⚠️ 注意：若父容器用了
transform或will-change，某些旧版 Chrome 可能导致overflow: hidden失效，此时退回直接作用于<img>更稳 - 必须设显式且相等的
width和height（如120px），不能用width: 100%; height: auto; - 原图非正方形（如 600×400）时，
object-fit: cover不可省：它让图片等比缩放并居中裁剪，避免拉伸变形 - 响应式场景下，可用
aspect-ratio: 1 / 1（Chrome 88+/Firefox 89+/Safari 15.4+），IE 和旧 Safari 需回退为padding-bottom: 100%hack - 务必加
display: block到<img>上，消除默认间隙 - 若用
background-image方案替代<img>标签（尤其在邮件模板或老环境），需配background-size: cover和background-position: center - 微信 WebView、iOS 9–12 等环境对
<img>直接设border-radius渲染不稳定，优先用<div> 包裹方案 </div>
非正方形图怎么不出椭圆？
border-radius: 50% 的百分比值是按当前元素宽高分别计算的。宽高不等时，结果必然是椭圆——比如 width: 200px; height: 150px; 下的 50% 相当于 circle(100px at 100px 75px)。
容易被忽略的细节：行内间隙与显示模式
<img> 默认是行内元素，底部会留一行基线间隙，导致圆形容器底部露白边。这不是圆角问题，但常被误认为裁剪失败。
