border-radius: 50% 不保证出圆，因它仅定义边框形状，不强制裁剪；需同时满足宽高相等、启用 overflow: hidden（容器）或 object-fit: cover（图片）、且邮件中须预处理为正方形图。

直接加 border-radius: 50% 不一定出圆——它只画边框形状，裁不裁图、圆不圆，取决于宽高是否相等、是否启用裁剪、图片原始比例和渲染环境。

为什么写了 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>），必须显式加 <code>overflow: hidden，否则图片照常溢出
• 非正方形原图（如 600×400）直接套 border-radius: 50%，结果一定是椭圆——因为半径按宽高分别计算

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

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


虾345
虾345是面向AI Agent生态的综合型导航与信息聚合平台。
下载
• 给容器（或 <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%

怎么给不同图片设置不同圆角效果？

关键在于精准控制样式作用范围，而非依赖标签名（如 img1 是非法选择器）。

• 用类选择器：CSS 中写 .rounded { border-radius: 50%; }，HTML 中写 <img class="rounded">
• 邮件开发中优先用内联样式：<img src="..." style="max-width:90%">，绕过客户端 CSS 过滤风险
• 避免重复 或 标签，整个文档只能有一个 和一个
• 不要用 img1 这类自定义标签名——HTML 中 <img> 是唯一合法标签，img1 不是标准元素，浏览器会忽略其样式规则

最容易被忽略的是：宽高数值是否真的一致、overflow: hidden 是否落在正确层级、以及邮件客户端对 object-fit 的彻底无视——这些地方一错，圆就变椭，圆角就变“形”。