border-radius本身不裁剪内容，仅控制边框和背景形状；真正裁剪需overflow:hidden与之同作用于同一容器，否则子元素仍按矩形渲染溢出。
border-radius 本身不裁剪任何内容，它只控制边框和背景的绘制形状；真正负责裁剪的是 overflow: hidden，且必须作用于同一容器。
为什么写了 border-radius 子元素还是直角溢出
这是最典型的误解：把视觉样式当成了布局指令。border-radius 不改变盒模型尺寸，也不影响子元素的定位或渲染边界——它只是让边框、背景色、背景图、阴影在视觉上“变圆”。子元素（比如图片、文字、视频）仍按原始矩形区域渲染，只要没被显式裁剪，就会直挺挺地伸到圆角外。
- 常见错误：给
<img alt="为什么CSS的border-radius无法裁剪子元素？" >自己加border-radius: 50%，但父容器没设overflow: hidden→ 图片边角依然尖锐 - 更隐蔽的坑：父容器用了
display: flex或grid，子元素是inline元素（如未设display: block的<img alt="为什么CSS的border-radius无法裁剪子元素？" >），overflow: hidden对行内内容裁剪不可靠 - 注意：如果父容器有
transform或will-change，某些 Safari/Android WebView 版本会破坏overflow: hidden对圆角裁剪的生效逻辑
overflow: hidden 是怎么配合 border-radius 裁剪的
只有当 overflow: hidden 和 border-radius 同时设置在**同一个容器**上时，浏览器才会启用“圆角路径裁剪”——即按 border-radius 定义的弧线去裁掉超出的内容。这不是 CSS 的“智能推断”，而是明确的组合规则。
- 仅
border-radius→ 边框/背景圆，内容照常溢出 - 仅
overflow: hidden→ 内容被矩形硬裁（四角仍是直的） - 两者同在父容器上 → 内容按圆角路径裁切（前提是该容器是裁剪上下文的根）
- 关键细节：若祖先链中某层有
overflow: hidden但没设border-radius，WebKit 会用那个祖先的矩形边界做第一道裁剪，子元素的圆角直接被截断
video 和 img 这类元素为什么特别难裁
<video></video> 是原生媒体组件，绕过标准盒模型裁剪；<img alt="为什么CSS的border-radius无法裁剪子元素？" > 默认为 inline，受基线对齐影响，底部常留白。它们都不会因父容器的 border-radius 自动适配。
立即学习“前端免费学习笔记（深入）”；
-
<video></video>必须由**直接父容器**同时设border-radius+overflow: hidden才能裁；且父容器宽高要 ≥ 视频实际渲染尺寸（object-fit: cover时尤其容易超） -
<img alt="为什么CSS的border-radius无法裁剪子元素？" >需确保：display: block（消除行内间隙）、父容器有overflow: hidden、避免object-fit: none导致撑出 - 小程序环境（微信/支付宝）中，
<video></video>还需外裹<cover-view></cover-view>，否则原生视图层无视 CSS 裁剪
哪些情况会让 overflow + border-radius 失效
不是代码写错了，而是渲染上下文被意外干扰。最容易被忽略的是背景和边框自身的干扰。
- 背景渐变或图片用了
background-clip: border-box（默认值）→ 背景铺满边框区，把圆角边缘“撑平”，看起来像没圆角 - 边框用了
border-image→ W3C 明确规定它不参与圆角裁剪，四角永远是直的；得用clip-path: inset(0 round 8px)强制裁 - 父容器有
box-shadow但没背景色 → 某些 Safari 版本下阴影无法贴合圆角，需加background-color: transparent或background-clip: padding-box - 移动端 iOS Safari 动画中（如 hover 缩放），
overflow: hidden会短暂失效，“破框”现象明显；此时-webkit-mask是唯一稳定解法
真正决定圆角是否可见的，从来不是 border-radius 值本身，而是整个裁剪链是否完整：从祖先的 overflow 状态，到当前容器的 overflow + border-radius 组合，再到背景、边框、子元素的 display 和尺寸行为——漏掉其中一环，圆角就只是“画在空气里”。
