border-radius 仅影响自身边框和背景，不裁剪子元素；需配合 overflow: hidden 才能实现圆角裁剪，且 safari 中 transition 下易失效，应改用 -webkit-mask。

border-radius 本身不裁剪子元素，只影响自身边框和背景

这是最根本的原因：CSS 规范里 border-radius 只控制元素自身的边框、背景、轮廓的绘制区域，并不改变容器的渲染裁剪边界。子元素（比如 <img>、<div>、绝对定位块）默认仍按原始矩形盒子渲染，圆角只是“视觉遮罩”，不是物理裁剪线。 <p>常见错误现象包括：</p> <ul> <li>卡片设了 <code>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 的裁剪边界会短暂“松动”，导致子元素从圆角外溢出。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

此时不能靠 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，再怎么调子元素样式都没用。