iframe自身不支持border-radius裁剪，需用外层div包裹并同时设置border-radius和overflow:hidden，且iframe需100%填满该div；移动端部分环境需加transform:translateZ(0)增强兼容性。
iframe 本身不支持 border-radius 裁剪
直接给 iframe 元素加 border-radius 和 overflow: hidden 是无效的——它不会裁掉四个角，内容仍按直角显示。这是因为 iframe 是一个嵌入式文档容器，其渲染边界不受父级 CSS 裁剪规则直接影响（尤其在 Safari、旧版 Android WebView 中更明显）。你看到的“圆角”只是边框画了个弧，内容照常溢出。
必须用外层容器套住 iframe 才能裁剪
真正起作用的是包裹 iframe 的父 div，它要同时满足三个条件：
-
border-radius写在该div上（不是iframe） -
overflow: hidden也必须写在该div上（缺一不可） -
iframe必须填满这个div（width: 100%; height: 100%），且自身不能有 margin 或 border 干扰尺寸
示例写法：
<div class="rounded-iframe"> <iframe src="https://youtube.com/embed/xxx" frameborder="0" allowfullscreen></iframe> </div>
.rounded-iframe {
width: 560px;
height: 315px;
border-radius: 12px;
overflow: hidden;
}
.rounded-iframe iframe {
width: 100%;
height: 100%;
border: none;
}
移动端和微信 WebView 的兼容性坑
某些环境（如 iOS 12 及更早、微信内置浏览器）对 overflow: hidden 容器内的 iframe 裁剪支持不稳定，可能出现“闪方”或边缘漏出。这时可以加一层防御性处理：
立即学习“前端免费学习笔记（深入）”；
- 给
div加transform: translateZ(0)强制硬件加速（部分安卓 WebView 有效） - 避免在该容器上使用
transform: scale()或will-change，它们可能让overflow: hidden失效 - 如果仍不行，退回到用
clip-path: circle(50% at 50% 50%)（但注意 IE 和 Android 4.4– 不支持）
为什么不能只靠 padding-bottom hack 或 aspect-ratio
aspect-ratio: 1 / 1 或 padding-bottom: 100% 只解决宽高比问题，不解决裁剪。即使容器是正方形，没加 overflow: hidden，iframe 四角照样直挺挺地露出来。裁剪生效与否，只取决于「谁在裁」——是那个带 overflow: hidden 的父容器，而不是它的子元素或比例设置。
