border-radius 本身不裁剪子元素，需配合 overflow: hidden 和 isolation: isolate 才能在 ios safari 稳定生效；单独使用 border-radius 仅影响边框和背景形状，不创建裁剪上下文。
border-radius 为什么不能直接裁剪子元素
父元素设了 border-radius，但子元素（比如图片、绝对定位块）依然顶到圆角外边——这不是 bug，是 CSS 渲染规范行为。CSS 的 border-radius 本身不触发「裁剪上下文」，它只影响边框和背景的绘制形状，不自动等价于 overflow: hidden。
真正起裁剪作用的是「层叠上下文 + 溢出限制」组合。iOS Safari 尤其严格：即使父元素有 border-radius 且写了 overflow: hidden，若内部存在 transform、position: fixed 或某些合成层触发条件，裁剪仍可能失效。
常见失效场景包括：
- 子元素用了 transform: translateZ(0) 或 will-change: transform
- 子元素是 position: absolute 且父元素未形成新的层叠上下文
- 父元素没有明确设定 overflow: hidden（仅靠 border-radius 不够）
iOS 上必须加 isolation: isolate 的原因
iOS Safari（尤其 iOS 15.4–16.4）在处理 border-radius + overflow: hidden 时，对层叠上下文的创建更保守。当父元素没触发独立层叠上下文，子元素的渲染层可能“逃逸”出裁剪边界。
isolation: isolate 的作用是强制创建一个独立的层叠上下文，同时确保该上下文的裁剪边界与 border-radius 对齐。它不改变布局，但改变了渲染层归属，让 overflow: hidden 真正生效。
实操建议：
- 必须和 overflow: hidden 同时使用，单独写 isolation: isolate 无效
- 不要加在子元素上，只加在带 border-radius 的父容器上
- 若父元素已用 transform 或 opacity 创建了层叠上下文，isolation 可能冗余，但加了也无害
完整可用的父容器样式写法
以下组合在 iOS 所有主流版本（iOS 14+）中稳定生效：
.card {
border-radius: 12px;
overflow: hidden;
isolation: isolate;
}
注意点：
- border-radius 值必须是确定的（不能是 inherit 或 unset）
- 如果父元素高度由内容撑开，确保没有 min-height: auto 类干扰
- 避免在父元素上叠加 backface-visibility: hidden，它可能和 isolation 冲突导致闪屏
替代方案：什么时候不该用 isolation
如果项目需兼容老 Android WebView（如 UC 12.x）或某些低版本桌面 Safari，isolation 支持度不足（CanIUse 显示 iOS Safari 15.4+ 才完全可靠）。此时可降级用：
.card {
border-radius: 12px;
overflow: hidden;
transform: translateZ(0); /* 触发硬件加速并创建层叠上下文 */
}
但要注意：
- transform: translateZ(0) 在部分低端安卓机上会引起文字模糊
- 它会改变元素的 stacking context 顺序，可能影响 z-index 行为
- 若父元素已有 transform，重复添加可能引发意外交互（比如 scale 被覆盖）
圆角裁剪不是“设了就完事”的属性，iOS 端的渲染链路比想象中更敏感——漏掉 isolation: isolate 或写错层级，都可能让溢出内容在真机上突然“破框而出”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
