使用 CSS 移除 IFrame 的边框

cssweb developmentfront end technology更新于 2024/4/18 0:44:17

我们可以使用 HTML 中的"iFrame"将文档嵌入 HTML 网页。例如，我们可以使用"IFrame"HTML 标签在网页中嵌入 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"的 CSS 属性"frameborder"来移除 IFrame 的边框。

示例

在下面的示例中，我们使用 HTML 文档中的 IFrame 嵌入了两个不同的 YouTube 视频。对于这两个 IFrame，我们都使用了 HTML 属性"frameborder"。

在输出中，用户可以观察到，第一个 YouTube 视频包含边框，因为我们使用了"1"作为"frameborder"的值;而第二个 YouTube 视频不包含边框，因为我们使用了"0"作为"frameborder"的值。

<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 属性可用于移除任何 HTML 元素的边框。此外，它还可用于移除 IFrame 的边框。

语法

用户可以按照以下语法使用 border 属性移除 IFrame 的边框。

iframe {
    border: none;
}

在上述语法中，我们将 border: none 应用于 IFrame 以移除边框。

示例

在下面的示例中，我们使用 border 属性移除 IFrame 的边框。此外，我们还将 border 的值设置为 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>

示例

在下面的示例中，我们使用了 CSS 属性"border-width"来移除 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 的边框。在第一种方法中，我们使用了 HTML 属性"frameborder"，其值为 0 或 1。

在第二种方法中，我们使用了 CSS 属性"border"和"border-width"来移除 IFrame 的边框。然而，"border-width"属性不会移除 IFrame 的边框，而是会由于宽度为零而隐藏边框。此外，在某些浏览器中，"frameborder"CSS 属性已被弃用，因此建议使用"border"CSS 属性。