iframe本身无法直接设圆角，必须用带border-radius和overflow:hidden的父容器包裹，并设iframe为display:block且宽高相等。
iframe 本身不能直接变圆，得靠父容器裁剪
HTML 的 iframe 是一个替换元素（replaced element），它的渲染由浏览器内部机制控制，border-radius 直接加在 iframe 标签上**不会生效**——哪怕你写了 border-radius: 50%，它依然显示为矩形。真正起作用的是用一个带圆角的父容器“套住”它，并配合 overflow: hidden 裁剪溢出内容。
- 必须用包裹
div（或其他块级容器）设置border-radius和overflow: hidden -
iframe本身需设为块级（display: block），避免底部留白 - 宽高建议设为相等值（如
width: 200px; height: 200px），否则50%会变成椭圆 - 若用百分比尺寸，父容器需有明确宽高，否则
border-radius: 50%计算无依据
最简可行写法（含关键细节）
下面这段代码能稳定产出正圆形 iframe：
<div style="width: 200px; height: 200px; border-radius: 50%; overflow: hidden;">
<iframe src="https://example.com"
style="width: 100%; height: 100%; display: block; border: none;">
</iframe>
</div>
注意三点：overflow: hidden 缺一不可；display: block 消除 iframe 默认的行内基线对齐导致的底部空隙；border: none 防止旧浏览器残留边框干扰圆角视觉。
响应式圆形 iframe 怎么写
想让它随屏幕缩放还保持正圆？不能只靠 width: 50% + height: 50%——因为父容器宽高可能不等。可靠做法是用 aspect-ratio: 1 / 1 配合 border-radius: 50%：
立即学习“前端免费学习笔记（深入）”；
<div style="width: 50vw; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;"> <iframe src="https://example.com" style="width: 100%; height: 100%; display: block; border: none;"></iframe> </div>
aspect-ratio 是现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）原生支持的属性，它强制容器宽高比恒为 1:1，比用 padding-top 技巧更直观、更可控。老版本 Safari 需回退到伪元素或 JS 补丁。
为什么 sandbox 或 allow 属性不影响圆角
sandbox、allow、src 这些都是控制 iframe 内容行为和权限的属性，和渲染形状完全无关。它们决定的是“里面能不能跑脚本”“能不能全屏”，而不是“外面看起来圆不圆”。想让圆形 iframe 正常加载内容，只需确保 src 可访问、跨域策略允许、且没被 sandbox 过度限制（比如禁了 allow-scripts 导致页面白屏），但这些都不改变圆角实现逻辑。
真正容易被忽略的是：圆角是否生效，只取决于父容器的 overflow 和尺寸约束是否到位。很多调试失败，其实是因为忘了加 overflow: hidden，或者容器宽高不一致却硬写 border-radius: 50%。
