必须一起用，因为border-radius仅绘制圆角边框而不裁剪内容，overflow:hidden才真正裁剪超出圆角区域的子元素；二者缺一不可，否则圆角仅视觉存在，内容仍会直角溢出。
border-radius + overflow: hidden 为什么必须一起用
单独写 border-radius 只是给容器“画个圆角边框”，它不裁剪内容——图片、视频、文字照样从直角边缘溢出。真正起裁剪作用的是 overflow: hidden，它让超出圆角区域的部分不可见。漏掉这句，border-radius 就只剩个视觉边框，毫无裁剪效果。
常见错误现象：
- 写了
border-radius: 50%，但图片四角还是方的 - 圆角看起来“毛边”或偏移，尤其在旧版 Safari 或 Android WebView 中
- 卡片里文字或图标跑出圆角外，尤其当子元素用了
position: absolute
图片圆角裁剪必须满足的三个硬条件
想用 div 包裹 img 实现稳定正圆头像，三者缺一不可：
-
width和height必须相等（如120px），否则border-radius: 50%出来的是椭圆 - 父容器必须设
overflow: hidden，不能只加在img上（兼容性差） -
img必须设object-fit: cover，否则原图非正方形时会拉伸或留白
错误写法：width: 100%; height: auto —— 高度不固定，50% 失效；object-fit: contain —— 留白，圆心对不齐。
video 和 iframe 的圆角要绕开哪些坑
video 标签可直接加 border-radius 和 overflow: hidden，但 iframe（如 YouTube 嵌入）不行：iframe 自身不响应 overflow，必须靠外层容器控制。
- 对
video：直接在video元素上设border-radius+overflow: hidden即可生效 - 对
iframe：必须套一层div，该div设border-radius+overflow: hidden，再让iframe填满它 - 避免在父容器上用
transform（如scale或translate），可能破坏裁剪边界
注意：部分安卓旧 WebView 对 video 的 overflow: hidden 支持不稳定，稳妥起见仍建议包裹一层 div 控制。
clip-path 能替代 border-radius 吗？什么情况下值得切
clip-path: circle() 不依赖宽高相等，能对任意尺寸图片稳定裁出正圆，比如 clip-path: circle(50% at 50% 50%)。但它有硬伤：
- IE 完全不支持，Android 4.4 及更早版本无效
- 和
position: fixed元素共存时，裁剪可能失效 - 动画性能比
border-radius差，频繁重绘易卡顿
真要用 clip-path，优先配 object-fit: cover，否则裁剪区域和图像内容难对齐。日常头像、卡片裁剪，border-radius + overflow 更轻量、更稳。
最易被忽略的点：裁剪是否生效，不取决于你写了多少 CSS，而取决于「谁在裁」——是父容器，还是子元素；是盒模型边界，还是渲染路径。写完记得检查 computed styles 里的 overflow 是否真的 applied 到了裁剪容器上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
