图片仍是方的根本原因是未设相等宽高、缺overflow: hidden裁剪，且原图非正方形时未配object-fit: cover；推荐用div容器+固定宽高+border-radius: 50%+overflow: hidden+img的100%宽高与object-fit: cover组合实现。
border-radius: 50% 为什么图片还是方的？
因为 border-radius: 50% 本身不裁剪内容，只定义“可视区域边框形状”。它像给窗口装了个圆形玻璃，但窗外的景（图片）照旧是矩形——除非你关上窗框（overflow: hidden），否则四角照样露出来。
常见错误现象：border-radius: 50% 写了，图片边缘仍溢出、四个角是直角、或变成椭圆。根本原因不是 CSS 写错，而是缺了关键约束：
- 容器（或
<img>自身）没设相等的width和height—— 长宽不等时，50%按各自方向算，结果是椭圆 - 没加
overflow: hidden—— 尤其当作用在父<div> 上时，漏掉这句，裁剪完全不生效 <li>原图非正方形，又没配 <code>object-fit: cover—— 图片被拉伸或留白，圆角再准也白搭 -
object-fit: cover必须写，否则图片会变形或留白；contain会导致上下/左右空隙，fill会拉伸 - 不要用
width: 100%; height: auto—— 高度无法锁定，border-radius: 50%失效 - 邮件模板中必须用内联样式，且避免
object-fit（Gmail/Outlook 基本不支持），稳妥做法是提前把图切成正方形 - IE 完全不支持
clip-path - Android 4.4 及更早版本无效
- 旧版 Safari 需要
-webkit-clip-path前缀，且行为不稳定 - 微信内嵌页部分版本对
clip-path渲染异常，圆心偏移或失效 - 头像上传前实时预览并导出圆形 blob
- 用户可拖拽缩放旋转的交互式裁剪（如 cropperjs）
- 导出图需透明背景（PNG）或精确控制压缩质量（JPG）
- 微信 JSSDK 上传要求 JPEG 格式且体积小，
canvas.toDataURL('image/jpeg', 0.92)是唯一可控方式 - 调用
ctx.clip()必须在ctx.drawImage()之前，否则路径不生效 - 若原图非正方形，先用
drawImage居中截取正方形区域，再套圆形，避免拉伸 - 移动端 Safari 和微信 WebView 对
globalCompositeOperation = 'destination-in'更稳，比clip()抗锯齿问题少
用 包裹 ![]()
还是直接设在 ![]()
上？优先用 <div> 容器方案，兼容性更稳。单独给 <code><img> 加 border-radius 在旧版 Safari 或 Android WebView 中可能渲染异常，比如圆角偏移、抗锯齿发虚。
推荐写法（内联或类选择器均可）：
<div style="width: 120px; height: 120px; border-radius: 50%; overflow: hidden;">
@@##@@
</div>
注意点：
clip-path: circle() 比 border-radius 强在哪？
它能绕过“必须正方形容器”的限制，对宽高不定的图片也能稳定裁出正圆，原理是直接定义裁剪路径而非依赖盒模型尺寸。
典型用法：clip-path: circle(50% at 50% 50%) 表示以元素中心为圆心、半径为宽高一半的圆。若想让圆始终覆盖整个图片，建议搭配 object-fit: cover。
但要注意兼容性硬伤：
结论：仅当项目明确不需兼容 IE / 老安卓，且图片尺寸不可控时才考虑它；否则老老实实用 border-radius + 容器 更省心。
什么时候必须用 canvas 裁剪？
当你需要真正生成一张**圆形像素图**（比如上传、截图、分享、打印），而不是只“看起来是圆”时，border-radius 和 clip-path 都不够——它们只是视觉遮罩，原始图片仍是矩形，后端收到的、用户截图看到的、微信放大查看的，全是四角俱全的图。
必须走 canvas 的典型场景：
关键细节容易忽略：
真正难的不是画圆，而是让圆在各种设备、各种上下文里都“真圆”——视觉方案管显示，canvas 才管数据。
优先用 <div> 容器方案，兼容性更稳。单独给 <code><img> 加 border-radius 在旧版 Safari 或 Android WebView 中可能渲染异常，比如圆角偏移、抗锯齿发虚。
推荐写法（内联或类选择器均可）：
<div style="width: 120px; height: 120px; border-radius: 50%; overflow: hidden;"> @@##@@ </div>
注意点：
clip-path: circle() 比 border-radius 强在哪？
它能绕过“必须正方形容器”的限制，对宽高不定的图片也能稳定裁出正圆，原理是直接定义裁剪路径而非依赖盒模型尺寸。
典型用法：clip-path: circle(50% at 50% 50%) 表示以元素中心为圆心、半径为宽高一半的圆。若想让圆始终覆盖整个图片，建议搭配 object-fit: cover。
但要注意兼容性硬伤：
结论：仅当项目明确不需兼容 IE / 老安卓，且图片尺寸不可控时才考虑它；否则老老实实用 border-radius + 容器 更省心。
什么时候必须用 canvas 裁剪？
当你需要真正生成一张**圆形像素图**（比如上传、截图、分享、打印），而不是只“看起来是圆”时，border-radius 和 clip-path 都不够——它们只是视觉遮罩，原始图片仍是矩形，后端收到的、用户截图看到的、微信放大查看的，全是四角俱全的图。
必须走 canvas 的典型场景：
关键细节容易忽略：
真正难的不是画圆，而是让圆在各种设备、各种上下文里都“真圆”——视觉方案管显示，canvas 才管数据。
