iOS Safari 中 img 的 border-radius 失效主因是 WebKit 合成图层绕过圆角裁剪，常见诱因包括父容器为 flex/grid、含 transform/will-change、未设宽高或使用 object-fit: cover；需确保宽高相等、display: block、避免隐性 overflow 及合成触发。
不是 border-radius 没生效，而是它没被“看见”——图片自身圆角在 iOS Safari 里常被跳过裁剪，安卓和桌面浏览器能直接渲染，但真机上失效几乎都卡在渲染层逻辑或父容器约束上。
为什么 iOS Safari 上 img 的 border-radius 看起来没反应
WebKit 内核（包括 iOS Safari）为保帧率，对启用了硬件加速的元素主动绕过圆角裁剪。只要 transform、will-change，或未设宽高），它的 border-radius 就不会参与像素级裁剪。
- 常见诱因：
img在display: flex容器中且没设固定宽高 → 百分比半径计算失准 -
img被object-fit: cover拉伸后，原始尺寸丢失 → 圆角基准失效 - 父容器用了
transform: scale(0.95)或will-change: transform→ 直接禁用圆角渲染
border-radius: 50% 在非正方形图片上变成椭圆，算失效吗
不算失效，是规范行为：border-radius 的百分比值，水平方向按元素宽度算，垂直方向按高度算。宽高不等时，50% 必然生成椭圆。
- 想得到正圆？必须让容器宽高相等，且
img填满该容器：width: 100px; height: 100px; border-radius: 50%; object-fit: cover; - 不想改尺寸？用
border-radius: 50px / 100px显式定义横纵半径，适配长图或 banner - 注意：若图片本身带透明边缘（如 PNG），即使圆角正确，边缘锯齿或伪影也会让人误判为“没生效”
父容器加了 overflow: hidden，但圆角还是被裁掉
这不是 bug，是 WebKit 的硬裁剪机制：祖先容器的 overflow: hidden 会强制截断所有子元素超出内容盒的像素，不管子元素自己有没有 border-radius。
- 快速验证：临时移除祖先的
overflow: hidden，看圆角是否出现 - 不改祖先？给
img自身加will-change: transform，触发新层叠上下文，绕过硬裁剪 - 更稳妥方案：把
border-radius和overflow: hidden都挪到父容器上，让裁剪与圆角同步发生 - 慎用
overflow: clip：仅 iOS Safari 16.4+ 支持，旧设备会回退成visible
图片底部留白、圆角区域被撑开，怎么收住
display: inline，会像文字一样对齐基线，底部自动留出空白间隙，导致容器高度虚高、圆角错位。
- 必加：
img { display: block; }或vertical-align: top; - 如果用了
background-image替代background-clip: padding-box，否则背景铺满边框区，“撑平”圆角 - 检查是否误设
box-sizing: content-box：padding + border 会让实际宽高超预期，圆角半径相对变小
真正难的不是写那行 border-radius: 50%，而是得确认：宽高是否确定、图片是否加载完成、父容器有没有隐性 overflow、设备是否在用 WebKit 合成图层——漏掉任意一环，圆就偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
