ios safari中border-radius对图片无效，是因webkit为性能主动跳过硬件加速元素的圆角裁剪；需父容器设明确宽高、overflow: hidden及border-radius，或改用clip-path兼容方案。
直接给 <img> 加 border-radius 在多数安卓和桌面浏览器里能立刻生效，但在 iOS Safari（尤其旧版本）上大概率失效——不是代码写错了，是渲染层绕过了裁剪逻辑。
为什么 iOS Safari 上 border-radius 对图片无效？
WebKit 为性能优化，对启用了硬件加速的元素（比如有 transform、will-change: transform、或父容器是 flex/grid 且未设宽高的情况）跳过圆角裁剪。这不是 bug，是主动放弃裁剪换帧率。
-
<img>自身设了border-radius: 50%，但父容器没固定尺寸 → iOS 不知道裁哪 - 图片被
flex: 1拉伸，原始宽高丢失 → 百分比计算失准 - 父容器用了
transform: scale(0.9)或will-change: transform→ 触发合成图层，裁剪被忽略 - 用
background-image替代<img>，却没加background-clip: content-box→ 背景图溢出圆角区域
必须加 overflow: hidden 吗？加在哪？
不是必须加在 <img> 上，而是要加在它的**直接父容器**，且该容器必须满足三个条件：有明确宽高、不依赖 flex 自适应、不同时带 transform/will-change。
- ✅ 正确写法：
.avatar { width: 48px; height: 48px; overflow: hidden; border-radius: 50%; }+<img src="..." style="max-width:90%"> - ❌ 错误写法：
.card { overflow: hidden; } .card img { border-radius: 50%; }—— 圆角在子元素，裁剪在父元素，视觉上仍是直角 - ⚠️ 注意：
overflow: hidden会强制创建新合成图层，页面中超过 5–6 个头像就可能触发低端 iPhone（如 6s）滚动卡顿
替代方案：什么时候该用 clip-path？
clip-path: circle(50% at 50% 50%) 能绕过 overflow 限制，直接裁图形，但兼容性有硬门槛。
- 仅推荐用于明确支持环境：iOS ≥ 15.5 + Android Chrome ≥ 100
- 上线前必须加检测：
@supports (clip-path: circle()) { ... } - 旧版 Safari（≤15.4）不支持百分比坐标，写死
circle(24px at 24px 24px)无法响应式适配 - 动画友好：
clip-path可以 transition，border-radius在 iOS 上动画常卡顿
真正难的不是那行 border-radius: 50%，而是它背后整个盒模型是否可控——宽高是否确定、图片加载是否完成、设备像素比是否影响 subpixel 渲染、甚至 Safari 私有 layer 树怎么建。漏掉任意一环，圆就偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
