只写 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>），必须显式加overflow: hidden，否则图片照常溢出 - 非正方形原图（如 600×400）直接套
border-radius: 50%，结果一定是椭圆——因为半径按宽高分别计算
怎么确保裁出来是正圆，不是椭圆？
核心是让显示区域为正方形。注意：border-radius: 50% 的百分比值按盒模型宽高分别计算，长宽不等时就是椭圆。
- 给容器（或
<img>自身）设相等的width和height，例如width: 120px; height: 120px; - 避免用
width: 100%; height: auto;这类响应式写法，否则高度无法锁定，圆角半径随宽高比浮动 - 如果必须响应式，用
padding-bottom: 100%配合height: 0维持正方形比例（仅适用于<div>容器） - 非正方形原图要用
object-fit: cover填满并居中裁剪，否则会拉伸或留白
直接写在 <img> 上 vs 套一层 <div> 容器，哪个更稳？
优先直接作用于 <img>，但必须满足前提；否则退回到容器方案。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 直接写在
<img>上：需同时设width、height（固定值）、border-radius: 50%、object-fit: cover、display: block - 套
<div>容器：更稳妥，尤其兼容旧环境；写法是<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 是否生效、容器是否撑开、图片是否异步加载导致样式错乱。
