极客笔记使用CSS去除IFrame的边框
我们可以使用HTML中的’IFrame’来嵌入文档到HTML网页中。例如，我们可以使用’IFrame’标签在网页中嵌入YouTube视频。
‘IFrame’默认包含边框。在本教程中，我们将学习使用CSS去除IFrame边框的各种方法。
使用Frameborder HTML属性
‘IFrame’包含’frameborder’ HTML属性。它可以取值为’0’或’1’。将’frameborder’ HTML属性的值设为’0’可以去除边框；否则，它会添加边框到’IFrame’。
语法
用户可以按照下面的语法使用’frameborder’ HTML属性去除IFrame的边框。
<iframe width="424" height="238" src="https://www.youtube.com/embed/qZOlCFincuU" frameborder="0"></iframe>
在上面的语法中，我们使用了带有值”0″的’frameborder’ CSS属性来移除IFrame的边框。
示例1
在下面的示例中，我们使用IFrame在HTML文档中嵌入了两个不同的YouTube视频。对于两个IFrame，我们都使用了’frameborder’ HTML属性。
在输出中，用户可以观察到第一个YouTube视频包含了边框，因为我们将’frameborder’的值设置为’1’，而第二个YouTube视频则不包含边框，因为我们将’frameborder’的值设置为’0’。
<html>
<body>
<h3> Removing the border from iframe using the <i> frameBorder </i> CSS property </h3>
<iframe width = "424" height = "238" src = "https://www.youtube.com/embed/qZOlCFincuU" title = "Welcome To Tutorialspoint - Simply Easy Learning" frameborder = "1" allow = "accelerometer; autoplay; clipboard-write; encryptedmedia; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>
<br> <br>
<iframe width = "424" height = "238" src = "https://www.youtube.com/embed/qZOlCFincuU" title = "Welcome To Tutorialspoint - Simply Easy Learning" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encryptedmedia; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>
</body>
</html>
使用CSS的‘border’属性
‘border’ CSS属性用于移除任何HTML元素的边框。此外，它还可用于移除IFrame的边框。
语法
用户可以按照下面的语法来使用‘border’ CSS属性来移除IFrame的边框。
iframe {
border: none;
}
在上面的语法中，我们已经应用了’border: none’来移除IFrame的边框。
示例2
在下面的示例中，我们使用了’border’ CSS属性来移除IFrame的边框。此外，我们将’none’作为边框的值。
在输出中，用户可以观察到IFrame不包含边框。
<html>
<head>
<style>
iframe {
border: none;
}
</style>
</head>
<body>
<h3> Removing the border from iframe using the <i> border: none </i> CSS property </h3>
<iframe width = "600" height = "300" src = "https://www.youtube.com/embed/qZOlCFincuU" title = "Welcome To Tutorialspoint - Simply Easy Learning" allow = "accelerometer; autoplay; clipboard-write; encryptedmedia; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>
</body>
</html>
示例
在下面的示例中，我们使用了border-width CSS属性来从IFrame中删除边框。这里，我们将border-width属性的值指定为0。
它产生与border属性类似的输出。
<html>
<head>
<style>
iframe {
border-width: 0;
}
</style>
</head>
<body>
<h3> Removing the border from iframe using the <i> border-width: 0 </i> CSS property </h3>
<iframe width="600" height="300" src="https://www.youtube.com/embed/qZOlCFincuU" title="Patch Tool in Adobe Photoshop | Adobe Photoshop | Tutorials Point" allow = "accelerometer; autoplay; clipboard-write; encryptedmedia; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</body>
</html>
用户学会了使用各种属性来去掉IFrame的边框。在第一种方法中，我们使用了’frameborder’ HTML属性，该属性的值可以是0或1。
在第二种方法中，我们使用了’border’和’border-width’ CSS属性来移除IFrame的边框。然而，’border-width’属性并不会真正移除IFrame的边框，而是通过将宽度设置为零来隐藏边框。另外，某些浏览器中已经废弃了’frameborder’ CSS属性，因此推荐使用’border’ CSS属性来做边框处理。