移动端iOS Safari中img的border-radius失效是因合成图层绕过裁剪，需在图片直接父容器设overflow:hidden并固定宽高，或用clip-path替代。
移动端图片圆角为什么用 border-radius 不一定生效
直接加 border-radius 在 <img alt="CSS如何控制移动端图片圆角显示_使用overflow hidden优化渲染" > 上，iOS Safari 有时不圆——尤其图片被父容器缩放、或用了 transform、或启用了硬件加速（比如 will-change: transform）时，渲染层会绕过圆角裁剪。这不是 bug，是 WebKit 对合成图层的优化策略：它优先保性能，舍裁剪。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须配合
overflow: hidden在图片的**直接父容器**上，不能只加在<img alt="CSS如何控制移动端图片圆角显示_使用overflow hidden优化渲染" >自身 - 父容器需有明确宽高（不能是
content-box且未设尺寸的 flex 子项） - 避免父容器同时设
transform或will-change，否则可能让overflow: hidden失效 - 若必须用
transform，可尝试加backface-visibility: hidden强制重建渲染层
overflow: hidden 在 iOS 上的渲染代价要留意
加了 overflow: hidden 后，WebKit 会为该元素创建独立的合成图层（layer），这能保证圆角生效，但也会增加内存占用和重绘开销。尤其当页面有多个头像、卡片图、轮播图时，批量使用容易触发卡顿。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对**真正需要圆角的图片容器**加
overflow: hidden，别全局套 class - 避免嵌套多层
overflow: hidden（比如卡片 div → 图片 wrapper → img） - 在低端 iOS 设备（如 iPhone 6s）上测试滚动帧率，用 Safari 开发者工具勾选 “Show Composited Layers” 查看图层数量
- 若只是小圆角（
border-radius: 4px），可考虑用 SVG mask 替代，规避图层提升
Flex/Grid 布局里图片圆角失效的典型场景
用 display: flex 排列头像，给 <img alt="CSS如何控制移动端图片圆角显示_使用overflow hidden优化渲染" > 加 border-radius: 50%，结果安卓正常、iOS 显示方图——大概率是父容器没设宽高，或 <img alt="CSS如何控制移动端图片圆角显示_使用overflow hidden优化渲染" > 被 flex 压缩后，原始尺寸信息丢失，导致 overflow: hidden 无法正确裁剪。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器（如
.avatar-wrapper）必须设width和height，且值固定（如40px），不能依赖max-width或aspect-ratio -
<img alt="CSS如何控制移动端图片圆角显示_使用overflow hidden优化渲染" >设width: 100%; height: 100%; object-fit: cover;，确保填满且不拉伸 - 不要依赖
flex: 1让图片自适应——它会让尺寸变成计算值，破坏overflow: hidden的裁剪基准
替代方案：用 clip-path 实现更可控的圆角
clip-path: circle(50% at 50% 50%) 能绕过 overflow 限制，直接裁剪图形，且支持动画。但它在旧版 iOS Safari（≤15.4）中不支持百分比坐标，写死像素值又难适配响应式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 仅用于现代环境（iOS ≥15.5 + Android Chrome ≥100），上线前用
@supports (clip-path: circle())检测 - 避免用
clip-path: inset()做圆角——它不支持圆弧，只能做直角裁剪 - 若需兼容老 iOS，仍应回退到
overflow: hidden+ 固定尺寸 wrapper 方案 - 注意
clip-path会影响事件穿透（比如点击区域变小），测试交互热区是否准确
最麻烦的不是写法，而是 iOS 渲染层的隐式切换——你改了一行 CSS，可能就让原本正常的圆角突然消失，或者让列表滚动掉帧。调试时先看“有没有独立图层”，再看“裁剪基准是不是确定的”，比反复调 border-radius 数值有用得多。
