border-radius 仅影响自身边框和背景，不裁剪子元素；需配合 overflow: hidden 才能实现圆角裁剪，且 Safari 中 transition 下易失效，应改用 -webkit-mask。
border-radius 本身不裁剪子元素，只影响自身边框和背景
这是最根本的原因：CSS 规范里 border-radius 只控制元素自身的边框、背景、轮廓的绘制区域，并不改变容器的渲染裁剪边界。子元素（比如 <img>、<div>、绝对定位块）默认仍按原始矩形盒子渲染，圆角只是“视觉遮罩”，不是物理裁剪线。
常见错误现象包括：
- 卡片设了
border-radius: 12px，但内部图片四角还是直的 - 轮播箭头用
position: absolute放在右上角，结果从圆角外侧“捅出来” - Safari 中背景渐变或图片边缘明显溢出，Chrome 看着正常
必须配 overflow: hidden 才能真正裁剪内容
overflow: hidden 的裁剪行为依赖于容器当前的边界形状——而这个形状由 border-radius 定义。二者缺一不可。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 不能只给父容器写
overflow: hidden却忘了加border-radius，否则仍是矩形裁剪 - 子元素若用了
position: absolute且top/left超出内边距范围，会被直接砍掉——这是预期行为，不是 bug - 如果父容器有
transform（如scale()或translateZ(0)），可能创建新层叠上下文，导致 Safari 下裁剪脱钩；可加isolation: isolate或will-change: transform强制同步
Safari 下 transition + overflow: hidden 会失效
Safari（尤其是 macOS 14+ / iOS 17+）在启用 transition 时，对裁剪区域的计算逻辑和 border-radius 的耦合不一致。动画过程中，overflow: hidden 的裁剪边界会短暂“松动”，导致子元素从圆角外溢出。
此时不能靠 will-change 或 transform: rotate(0) 补救，必须换底层机制：
- 用
-webkit-mask替代裁剪：-webkit-mask: radial-gradient(circle at center, #000 0%, #000 12px, transparent 12px) - 配套必须设：
mask-size: 100% 100%、mask-repeat: no-repeat、mask-position: center - 注意：不能混用
overflow: hidden和-webkit-mask，否则可能冲突
祖先元素 overflow: hidden 也会干扰子元素圆角
移动端和部分 WebView 中，任意祖先元素（比如 .scroll-container、.modal-overlay、甚至 body）设置了 overflow: hidden，且未触发新的层叠上下文，就可能让子元素的 border-radius 被硬裁成直角。
排查方式：
- 用 DevTools 选中目标元素，在 Styles 面板里逐级点开父节点，看
overflow值是否为hidden或clip - 临时在控制台执行：
getComputedStyle($0.parentElement).overflow，一层层往上试 - 别只查直接父级——WebKit 会向上穿透整个祖先链
复杂点在于：这种干扰往往藏得深，且只在 Safari 或特定 WebView 中复现；一旦漏掉某层祖先的 overflow，再怎么调子元素样式都没用。
