普通image标签加border-radius无效是因为image是替换元素，不自动裁剪溢出内容，ios下mode="aspectfill"时四角直出；必须用外层view包裹并设overflow:hidden才生效，边框也应加在容器上而非image上。
普通 image 标签加 border-radius 为什么没效果
因为 image 是替换元素，border-radius 不会自动裁剪溢出内容，iOS 尤其明显（比如 mode="aspectFill" 时四角直出）。必须用容器包裹并设 overflow: hidden 才生效。
- 写法：外层
<view class="img-wrap"><image src="..."></image></view>，CSS 中给.img-wrap加border-radius: 12px; overflow: hidden; - 别直接给
image写border-radius—— 它只影响边框绘制区域，不裁图 - 如果同时要边框，
border: 2px solid #eee写在容器上，不是image上
background-image 场景下圆角怎么写最省事
背景图天然受父容器 border-radius 约束，不用额外裁剪，也不依赖 overflow: hidden。
- 直接给容器设
background-image: url(...); border-radius: 8px; - 注意配
background-size: cover或contain，否则可能拉伸或留白 - 若需边框，仍写在同一个容器上：
border: 1px solid #ddd
canvas 绘制圆角图片时 clip() 顺序错就白干
canvas 中圆角本质是路径裁剪，clip() 必须在 drawImage() 之前调用，且路径必须闭合。顺序反了、漏 closePath()、或没 save()/restore() 隔离状态，都会导致圆角失效或影响后续绘制。
- 正确顺序：
ctx.beginPath()→ 画圆角路径（如用arcTo或手动四段弧）→ctx.closePath()→ctx.clip()→ctx.drawImage(...) - 推荐用封装好的路径函数，比如
drawRoundRectPath(ctx, w, h, r)，避免手写弧度出错 - 裁剪后想加边框？在
drawImage()后再用strokeRect()或重绘带描边的圆角矩形
uni-cropper 做圆形/圆角裁剪要不要自己 canvas
不需要。用 uni-cropper 并设 mode="circle" 或自定义宽高比 + borderRadius 参数，就能输出带圆角的 base64 图片，省去 canvas 兼容性处理（EXIF、像素对齐、临时文件路径等）。
- 关键点：调用
ref.cropper.setSrc(imagePath)动态设图，别只靠 props 传 —— H5 下不触发渲染 - 圆角值单位是 px，比如
borderRadius: 16表示 16px 圆角；设数组如[12, 12, 0, 0]可实现左上右上圆角、右下左下直角 - 真机调试微信小程序报
canvas is not defined？检查manifest.json是否开了「增强编译」
