Safari下圆角溢出失效主因是裁剪上下文不稳，非border-radius未生效；需配合isolation: isolate或-webkit-mask（含SVG遮罩）+ overflow: hidden + border-radius三者协同，且须注意background-clip、transform干扰及表单控件需重置-webkit-appearance。
直接说结论：Safari 下圆角溢出不是 border-radius 没生效，而是裁剪上下文没稳住——单靠 overflow: hidden 在动画或复杂布局中大概率失效，必须配合图层控制或遮罩机制。
为什么 overflow: hidden + border-radius 在 Safari 里经常“失灵”
这不是 CSS 写错了，是 WebKit 渲染机制决定的：当父容器只设了 border-radius 和 overflow: hidden，但没触发独立合成层时，子元素一旦执行 transform（比如 scale(1.05)、translateZ(0)），Safari 就可能在动画帧中短暂“松开”裁剪边界。
- 常见现象：卡片 hover 放大时图片四角顶破圆角；头像
border-radius: 50%缩放后变椭圆甚至露直角 - 真机必现，DevTools 模拟器常显示正常，容易误判
-
overflow: hidden本身仍起作用，但它只裁主文档流，不约束 GPU 渲染层里的变换元素
必须用 -webkit-mask 的场景：含 transform 动画的圆角容器
只要子元素有 transform（缩放、位移、旋转），isolation: isolate 或 transform: rotate(0) 都只能缓解，不能根治——-webkit-mask 是目前唯一与动画生命周期解耦的稳解。
- 必须同时写
-webkit-mask和mask，前者保 Safari，后者保未来标准 - SVG 中的
rx/ry必须和border-radius数值一致（单位px不能省） - 必须加
mask-size: 100% 100%和mask-repeat: no-repeat，否则缩放时遮罩会拉伸或偏移 - 示例（适配
border-radius: 12px）：.card { border-radius: 12px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='black' rx='12' ry='12'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='black' rx='12' ry='12'/%3E%3C/svg%3E"); }
静态或简单 hover 场景优先用 isolation: isolate
如果容器没有 transform 动画，只是普通悬停变色或轻微位移，isolation: isolate 更轻量、无遮罩开销，且兼容性极好（iOS 14+ / Safari 12.1+ 全支持）。
立即学习“前端免费学习笔记（深入）”；
- 必须和
border-radius、overflow: hidden同时写在父容器上，三者缺一不可 - 只加在父容器，不要加在
<img>或其他子元素上 - 若父容器已用了
transform: translateZ(0)或opacity: 0.99，isolation可能冗余，但加上也无害 - 典型写法：
.card { border-radius: 12px; overflow: hidden; isolation: isolate; }
表单控件（button、input[type="submit"]）必须先清 -webkit-appearance
iOS Safari 默认给表单控件设 -webkit-appearance: button，直接走 UIKit 原生绘制，border-radius 完全不参与计算——不加 -webkit-appearance: none，圆角永远无效。
- 必须覆盖的元素：所有
button、input[type="button"]、input[type="submit"]、input[type="reset"] - 加了
-webkit-appearance: none后必须手动补样式：border、padding、background-color、cursor: pointer - 别漏伪类：如果
button:active里写了border-radius，但基础选择器没加-webkit-appearance: none，那伪类照样不生效
真正容易被忽略的是协同问题：即使加了 transform: rotate(0) 或 -webkit-mask，如果父容器没背景色、子元素有透明区域，或者用了 box-shadow，Safari 下仍可能在圆角处露出直角边缘——这时候得回头检查 background-clip: padding-box 和边框是否存在。
