如果你想让iframe边框消失或自定义样式，通过CSS设置border属性或使用frameborder属性即可实现。
iframe边框的默认表现与常见困惑
在HTML中，iframe元素自带边框的历史由来已久，早期HTML4规范里，iframe默认有2像素宽的outset边框，颜色为灰色，进入HTML5时代后，浏览器厂商逐步弱化了默认边框现在你在Chrome、Firefox中新建一个iframe，如果不加任何修饰，它可能根本没有边框，很多老旧网站或模板仍然会通过frameborder属性或CSS给iframe加上边框，导致新手经常遇到“边框去不掉”的困扰。
如果你想彻底掌握iframe边框的控制权，先要理解它的两个层：一是HTML属性层（frameborder），二是CSS层（border、outline）。frameborder属性是早期专用控制，CSS则提供了更灵活的样式能力。
iframe边框怎么去掉？三种方法优劣对比
iframe边框怎么去掉最干净？实际开发中主要用三种方式,各有适用场景。
frameborder属性
在iframe标签中直接加入frameborder="0"或frameborder="no"，这是HTML4时代的标准做法，兼容性极好,几乎支持所有浏览器。
<iframe src="example.html" frameborder="0"></iframe>但这种方法只能控制边框有无，不能调整样式，而且HTML5中已不再推荐使用frameborder属性,不过浏览器仍会解析。
CSS border属性
通过CSS设置border: none;或border: 0;可以完全移除边框，这是现代前端开发的首选,因为你可以同时控制其他样式。
iframe {
border: none;
}CSS outline属性
有些情况下，边框消失后可能出现默认的轮廓线（outline），尤其是键盘焦点时，可以额外设置
outline: none;,但需注意可访问性。
| 方法 | 兼容性 | 样式灵活度 | 推荐场景 |
|---|---|---|---|
| frameborder属性 | 极佳，旧浏览器也好 | 低，仅能开关 | 需要兼容极老浏览器 |
| CSS border | 现代浏览器全支持 | 高，可定制 | 大多数项目首选 |
| CSS outline | 现代浏览器 | 高，但仅限轮廓 | 处理焦点边框 |
如果你需要兼容IE6-8，同时使用frameborder和CSS border最保险。 多数情况下，仅用CSS border: none;即可。
iframe边框样式设置：颜色、宽度、圆角
iframe边框样式设置并不复杂，但有一些细节值得注意，你可以像设置普通元素一样，给iframe添加边框颜色、宽度,甚至圆角。
设置边框宽度与颜色
iframe {
border: 2px solid #3498db;
}这会让iframe有一个2像素宽的蓝色实线边框，如果你想单独控制边框的哪一边，可以使用border-top、border-right等。
圆角边框
如果你想给iframe添加圆角，直接使用border-radius即可，但有一个常见陷阱：iframe内部的页面内容会溢出圆角区域，为此，你需要设置overflow: hidden;。
iframe {
border-radius: 8px;
overflow: hidden;
}如果你希望边框有渐变或阴影效果，可以用box-shadow模拟边框，这样更灵活。
iframe {
box-shadow: 0 0 0 2px #e74c3c;
}移动端与响应式边框
在移动设备上，iframe边框可能会影响布局，建议使用百分比宽度或vw单位，并配合
max-width: 100%;，边框宽度建议使用相对单位如em或rem,避免缩放变形。
iframe边框在不同浏览器中的兼容性处理
尽管现代浏览器对iframe边框的支持趋于一致,但仍有几个需要留意的地方。
旧版IE的边框问题
在IE8及以下，frameborder属性是唯一有效的边框控制方式，CSS border可能被忽略，所以如果你的项目需要支持那些古董浏览器，务必保留frameborder=”0″。
移动端Safari的默认边框
部分iOS版本中，iframe会有一个默认的1像素边框，且CSS border: none;无法完全消除，这时可以尝试设置frameborder="0"，或者使用-webkit-appearance: none;。
键盘焦点轮廓
当用户通过Tab键导航到iframe时，浏览器会显示一个焦点轮廓（outline），如果你希望隐藏它，可以设置outline: none;，但注意这可能影响可访问性，更合理的做法是自定义焦点样式，例如outline: 2px solid #2980b9;。
行业共识认为，同时使用frameborder属性和CSS border属性，可以覆盖绝大多数浏览器环境。 如果你只使用CSS，最好加上frameborder="0"作为后备。
实际嵌入场景：无边框iframe实现技巧
当你需要嵌入地图、视频、社交媒体组件或第三方表单时，通常希望iframe看起来像页面的一部分,没有突兀的边框。
嵌入百度地图
如果你嵌入百度地图，默认iframe可能带有边框,你可以通过以下方式去掉：
<iframe src="https://map.baidu.com/..." frameborder="0" style="border:0;"></iframe>嵌入YouTube视频
YouTube的嵌入代码默认是
frameborder="0"，但有时自定义样式时需要注意圆角。设置圆角的同时必须设置overflow: hidden;，否则视频内容会超出圆角区域。
自适应无边框iframe
结合响应式设计，你可以让iframe宽度100%，高度自适应，常用技巧是使用padding-bottom百分比实现固定比例,然后用绝对定位让iframe填充。
.iframe-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; / 16:9比例 /
height: 0;
overflow: hidden;
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}这样嵌入的iframe不仅无边框，还能随容器宽度等比缩放,在移动端和桌面端都有良好表现。
iframe边框常见问题解答
iframe边框颜色怎么改？
直接用CSS设置border-color属性，或缩写border: 2px solid red;，注意如果同时存在frameborder属性，CSS样式会覆盖它，也可以使用box-shadow模拟边框颜色,这样不会影响内部布局。
iframe边框在手机端不显示怎么办？
首先检查CSS是否被正确加载，移动端浏览器可能对某些属性支持有限，尝试将border: none;改为border: 0;，并加上frameborder="0"属性，如果仍然不显示，可能是父容器overflow隐藏了边框,检查父元素的overflow设置。
iframe边框和内部页面边框冲突吗？
它们互不冲突，iframe边框是外部元素，内部页面边框是内部文档的样式，如果你希望完全无边框，需要同时设置iframe的border为none，并确保内部页面没有给自己加边框，不过内部页面通常无法直接控制,可以通过iframe的sandbox属性限制部分样式。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/574653.html
