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>），必须显式加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>，但必须满足前提；否则退回到容器方案。
立即学习“前端免费学习笔记（深入）”；
-
<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%
怎么给不同图片设置不同圆角效果？
关键在于精准控制样式作用范围，而非依赖标签名（如 img1 是非法选择器）。
- 用类选择器：CSS 中写
.rounded { border-radius: 50%; }，HTML 中写<img class="rounded"> - 邮件开发中优先用内联样式：
<img src="..." style="border-radius: 50%;">，绕过客户端 CSS 过滤风险 - 避免重复
<head>或<body>标签，整个文档只能有一个<head>和一个<body> - 不要用
img1这类自定义标签名——HTML 中<img>是唯一合法标签，img1不是标准元素，浏览器会忽略其样式规则
最容易被忽略的是：宽高数值是否真的一致、overflow: hidden 是否落在正确层级、以及邮件客户端对 object-fit 的彻底无视——这些地方一错，圆就变椭，圆角就变“形”。
