只写 border-radius: 50% 图片大概率不是真圆形，必须同时满足：宽高数值相等、启用裁剪机制（现代浏览器对 img 默认裁剪，父容器需 overflow: hidden）、图片原始比例匹配或配合 object-fit: cover。

只写 border-radius: 50%，图片大概率不会变成真圆形——它只是画了个圆角边框，裁不裁内容、圆不圆，取决于宽高是否相等、是否启用裁剪机制、图片原始比例和渲染环境。

为什么加了 border-radius: 50% 图片还是方的或椭圆？

根本原因不是 CSS 写错了，而是 border-radius 本身不强制裁剪内容，它只定义“可视区域边界形状”。浏览器是否真正隐藏溢出部分，要看以下条件是否满足：

• width 和 height 必须数值相等（如 80px 和 80px），不能是 width: 100% + height: auto，否则长宽比浮动，50% 就变成按各自方向分别计算的椭圆半径
• 若直接作用于 <img> 标签，现代浏览器（Chrome 4+、Firefox 4+、Safari 5.1+、Edge）默认会裁剪图像内容；但旧版 Safari 或 Android WebView 中可能失效
• 若作用于父容器（如 <div>），必须显式加 <code>overflow: hidden，否则图片照常溢出
• 非正方形原图（如 600×400）直接套 border-radius: 50%，结果一定是椭圆——因为半径按宽高分别计算

怎么确保裁出来是正圆，不是椭圆？

核心是让显示区域为正方形。注意：border-radius: 50% 的百分比值按盒模型宽高分别计算，长宽不等时就是椭圆。


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
• 给容器（或 <img> 自身）设相等的 width 和 height，例如 width: 120px; height: 120px;
• 避免用 width: 100%; height: auto; 这类响应式写法，否则高度无法锁定，圆角半径随宽高比浮动
• 如果必须响应式，用 padding-bottom: 100% 配合 height: 0 维持正方形比例（仅适用于 <div> 容器） <li>非正方形原图要用 <code>object-fit: cover 填满并居中裁剪，否则会拉伸或留白

直接写在 <img> 上 vs 套一层 <div> 容器，哪个更稳？ <p>优先直接作用于 <code><img>，但必须满足前提；否则退回到容器方案。

• 直接写在 <img> 上：需同时设 width、height（固定值）、border-radius: 50%、object-fit: cover、display: block
• 套 <div> 容器：更稳妥，尤其兼容旧环境；写法是 <code><div style="width:120px;height:120px;border-radius:50%;overflow:hidden;"><img src="..."></div>
• 邮件场景下必须用内联样式，且不能依赖 object-fit —— Gmail、Outlook Web 等会忽略它，唯一可靠路径是提前把图片处理成正方形（如 200×200），再用 width="200" + 内联 border-radius: 50%

要不要用 clip-path 替代 border-radius？

除非你需要偏移中心、做非对称裁剪，或者明确要求支持 circle(50% at 60% 40%) 这类带坐标的圆，否则没必要。

• clip-path: circle(50%) 行为和 border-radius: 50% 在正方形容器下几乎一致
• 但 clip-path 兼容性差：IE 完全不支持，旧版 Safari 需前缀，Android 4.4 及更早版本也无效
• 若用 clip-path，记得补 fallback：比如先写 border-radius: 50%，再覆盖 clip-path: circle(50%)

最容易被忽略的一点：不是所有“圆形”都是真裁剪——很多情况只是视觉圆角，图片原始尺寸没变，加载未完成时仍可能塌陷或错位；务必检查 width/height 是否生效、容器是否撑开、图片是否异步加载导致样式错乱。