border-radius: 50% 仅视觉圆角，不裁切像素，上传后仍为矩形图；真遮罩需 canvas 或 mask-image：前者兼容强、可输出圆形 blob，后者 css 实现但不支持 ie/旧 safari。
直接用 border-radius: 50% 是最快方案，但仅限视觉圆角；真要“遮罩”（即裁切像素、导出/上传后仍是圆形），必须用 canvas 或 mask-image。
为什么 border-radius: 50% 不算真正遮罩
它只是盖住溢出区域，原始图片数据完全没变——上传后后端收到的仍是矩形图，微信内嵌页放大、截图分享、打印时圆角常失效。
- 常见错误现象：
border-radius在 iOS WebView 中点击放大后四角露出来 - 父容器没设
overflow: hidden，滚动时圆形边缘会“滑出” - 图片宽高不等却只设
border-radius: 50%→ 实际渲染为椭圆 - 没配
object-fit: cover，非正方形原图被拉伸变形
mask-image 实现真圆形遮罩（现代浏览器）
这是 CSS 层面最接近“像素级裁切”的方案，支持软边、动画和 SVG 路径，但依赖 alpha 或亮度值，不能直接填颜色。
- 必须配合固定宽高，否则渐变中心偏移：
width: 120px; height: 120px; - 关键写法：
-webkit-mask-image: radial-gradient(circle at center, white 50%, transparent 51%); mask-image: radial-gradient(circle at center, white 50%, transparent 51%); - 注意：
white表示显示区域，transparent表示隐藏；51% 而非 70% 是为了硬边（避免羽化） - 不支持 IE 和旧版 Safari；导出为 PNG 时需额外处理（
mask不参与 canvas toDataURL）
用 canvas 做可上传的圆形头像（兼容性 & 可控性最强）
适用于用户上传→预览→裁剪→提交全流程，能输出真正圆形的 Blob 或 base64。
- 核心步骤：创建
canvas→ctx.arc()画圆 →ctx.clip()→ctx.drawImage()绘图 - 别漏掉
ctx.save()/ctx.restore()，否则后续绘图错乱 - 设备像素比影响清晰度：
canvas.width = size * window.devicePixelRatio，再用 CSS 缩放回原尺寸 - 若图片带 EXIF 旋转信息，需先用
exif-js或createImageBitmap解析方向，否则圆形裁剪歪斜
移动端适配与易忽略细节
真遮罩在移动场景下最容易翻车的地方，不是代码写错，而是坐标、缩放、事件穿透没对齐。
-
canvas上做 touch 拖拽裁剪时，记得用getBoundingClientRect()把 clientX/Y 映射到 canvas 坐标系，别直接用offsetX - 微信内置浏览器对
mask-image支持不稳定，iOS 16.4+ 才较可靠，上线前务必真机测试 - 用
background-image+border-radius兼容 IE11 时，无法监听图片加载失败（onerror不触发），得靠img标签 fallback - 所有方案都绕不开一个问题：原始图片分辨率太低（如 80×80），强行裁成 64px 圆形头像会模糊——前端应提示最小建议尺寸（≥200×200）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
