border-radius本身不裁剪子元素，仅控制边框、背景和阴影的绘制形状；真正裁剪需overflow:hidden与之同设于同一容器，否则子元素仍按原始矩形渲染溢出。
border-radius 本身不裁剪子元素，它只控制边框、背景和阴影的绘制形状；真正起裁剪作用的是 overflow: hidden，且必须和 border-radius 同时作用于**同一容器**，否则子元素仍按原始矩形区域渲染。
为什么写了 border-radius 子元素还是直角溢出
这是把视觉样式误当成布局指令的典型问题。border-radius 不改变盒模型尺寸，也不影响子元素的定位或渲染边界——它只是让边框、背景、阴影“看起来”变圆。子元素（比如 <img>、<video></video>、绝对定位块）默认仍按父容器原始矩形边界渲染，只要没被显式裁剪，就会直挺挺地伸到圆角外。
常见错误现象：
- 卡片设了
border-radius: 12px，但内部图片四角仍是直的 - 轮播箭头用
position: absolute放在右上角，结果从圆角外侧“捅出来” - Safari 中背景渐变或图片边缘明显溢出，Chrome 看着正常
overflow:hidden 必须和 border-radius 同时生效
overflow: hidden 的裁剪行为依赖于容器当前的边界形状——而这个形状由 border-radius 定义。二者缺一不可。
实操要点：
- 不能只给父容器写
overflow: hidden却忘了加border-radius，否则仍是矩形裁剪 - 若父容器有
transform（如scale()或translateZ(0)），可能创建新层叠上下文，导致 Safari 下裁剪脱钩；可加isolation: isolate强制同步 - 子元素若用了
position: absolute且top/left超出内边距范围，会被直接砍掉——这是预期行为，不是 bug
iOS/Safari 下必须加 isolation: isolate
iOS Safari（尤其 iOS 15.4–16.4）对层叠上下文的创建更保守。即使父元素有 border-radius 且写了 overflow: hidden，若内部存在 transform、position: fixed 或某些合成层触发条件，裁剪仍可能失效。
isolation: isolate 的作用是强制创建一个独立的层叠上下文，确保该上下文的裁剪边界与 border-radius 对齐。它不改变布局，但改变了渲染层归属。
关键限制：
- 必须和
overflow: hidden、border-radius同时使用，单独写无效 - 不要加在子元素上，只加在带
border-radius的父容器上 -
border-radius值必须是确定的（不能是inherit或unset）
动画中圆角裁剪失效怎么办
仅靠 border-radius + overflow: hidden 做 :hover { transform: scale(1.05) }，Safari 极易在动画帧中短暂失效，“破框”闪现。
目前最稳的兜底法是加 WebKit 专属掩码：
-webkit-mask: radial-gradient(circle at top left, transparent 12px, #000 12px) top left / 100% 100%; mask: radial-gradient(circle at top left, transparent 12px, #000 12px) top left / 100% 100%;
其中 12px 必须与 border-radius 值严格一致；四个方向的圆角需分别写四个 radial-gradient，或改用 SVG mask 更精准。
注意：-webkit-mask 和 isolation: isolate 不可混用，且前者必须配 mask-size: 100% 100% 和 mask-repeat: no-repeat，否则缩放时遮罩会拉伸或偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
