iOS Safari 中 img 的 border-radius “失效”主因是硬件加速跳过裁剪，需用 overflow: hidden + isolation: isolate 的父容器包裹并创建层叠上下文。
直接给 <img> 加 border-radius 大概率能生效，但 iOS Safari 上“看起来没效果”，根本原因不是属性写错了，而是渲染层绕过了裁剪逻辑——你得先判断是「真失效」还是「被裁掉了」。
为什么 iOS Safari 里 border-radius 对 <img> 常常不显示圆角
iOS Safari（尤其是 15.4+）用 WebKit 渲染，它对启用了硬件加速的元素会主动跳过圆角裁剪。这不是 bug，是性能取舍：宁可丢圆角，也要保帧率。
-
<img>被父容器 flex/gird 拉伸、或设了transform/will-change: transform→ 触发合成图层，border-radius被忽略 - 父容器没设明确宽高（比如
width: auto或靠内容撑开），iOS 不知道裁哪，直接放弃 - 图片本身宽高不等，却设了
border-radius: 50%→ 渲染出椭圆，误以为“失效” - 祖先元素（比如
.scroll-container或body）有overflow: hidden，且未创建新层叠上下文 → 子元素圆角被硬裁
哪些场景下必须用 overflow: hidden + 父容器包裹
不是所有情况都要套一层 div，但以下几种，<img> 自身加 border-radius 就不可靠：
- 图片在 Flex/Grid 容器中，且父容器没设固定尺寸（如
width: 100px; height: 100px;） - 需要响应式缩放（比如
max-width: 100%），又不想图片溢出圆角边界 - 卡片类组件，圆角属于容器视觉风格，图片只是内容子项（此时圆角逻辑应在父级）
- 图片用了
object-fit: cover或contain，但父容器未约束尺寸 → 渲染时机导致圆角计算错位
这时正确写法是：.avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }，再让 <img> 填满该容器。
立即学习“前端免费学习笔记（深入）”；
为什么加了 isolation: isolate 才能在 iOS 上稳住圆角
iOS Safari 对「裁剪上下文」要求更严。光有 border-radius 和 overflow: hidden 不够，若父容器没形成独立层叠上下文，子元素仍可能“逃逸”出裁剪区。
-
isolation: isolate强制创建层叠上下文，让overflow: hidden的裁剪真正对齐border-radius边界 - 必须和
overflow: hidden同时使用，单独加无效 - 不要加在
<img>上，只加在带border-radius的**直接父容器**上 - 若父容器已用
transform或opacity创建了层叠上下文，isolation是冗余但无害
完整兜底写法：.card { border-radius: 12px; overflow: hidden; isolation: isolate; }
border-radius 和 border-image 一起用为什么会失效
因为 border-image 替换了边框的绘制方式，而浏览器目前不支持把圆角裁剪应用到图像边框上——border-radius 只影响背景和内容区域，不管 border-image。
- 渐变边框需求，别硬套
border-image+border-radius - 改用伪元素方案：
::before绘制渐变背景，设好border-radius，再用mask或clip-path挖空中间，露出内容 - 如果只是普通边框，确保
box-sizing: border-box，避免边框粗细干扰圆角视觉
真正难的不是写对属性，而是分辨「是代码没起作用」，还是「代码起了作用，但被更高层的渲染规则覆盖了」——iOS 上多一层 isolation，安卓上可能根本不需要；父容器加 overflow: hidden 能救活圆角，也可能让滚动卡顿。动手前，先打开 Safari 开发者工具看「Composited Layers」。
