如何使用 CSS 移除 iframe 的边框?


使用 CSSiframe 中移除边框在您不想在网页上集成其他来源的内容(如 YouTube 视频、其他网页等)时显示不需要的边框时非常有用。iframe 是一个内联框架,允许我们在当前 HTML 文档中嵌入另一个文档。

在本文中,我们将讨论使用 CSS 从 iframe 中移除边框的各种方法。我们有一个 iframe 窗口,它在我们的 HTML 文档中显示其他网页的内容。我们的任务是移除 iframe 窗口周围的边框。

移除 iframe 边框的方法

以下是使用 CSS 从 iframe 中移除边框的方法列表,我们将在本文中逐步解释并提供完整的示例代码。

使用 frameborder 属性移除 iframe 边框

要从 iframe 中移除边框,我们使用了 frameborder 属性。HTML frameborder 属性指定是否显示 iframe 边框。

  • 我们使用 CSS heightwidth 属性设置了 iframe 窗口的尺寸。
  • 我们使用了 **frameborder="0"** 属性来移除 iframe 的边框。

示例

这是一个完整的示例代码,实现了上述步骤,使用 frameborder 属性从 iframe 中移除边框。

<html>
<head>
    <title>
        Remove border from IFrame using CSS
    </title>
    <style>
        iframe {
            height: 200px;
            width: 400px;
        }
    </style>
</head>
<body>
    <h3>
        Removing border from IFrame using CSS
    </h3>
    <p>
        In this example we have used 
        <strong>frameborder</strong> attribute to 
        remove the border from IFrame using CSS.
    </p>
    <iframe src="/css/index.htm" frameborder="0">
    </iframe>
</body>
</html>

使用 border 属性移除 iframe 边框

在这种方法中,我们将使用 border 属性,该属性可添加或移除元素周围的边框。在这种方法中,我们将对 iframe 使用 border 属性。

  • 我们使用 CSS height 和 width 属性设置了 iframe 窗口的尺寸。
  • 我们使用了 CSS **"border: none;"** 属性来移除 iframe 的边框。

示例

这是一个完整的示例代码,实现了上述步骤,使用 CSS border 属性从 iframe 中移除边框。

<html>
<head>
    <title>
        Remove border from IFrame using CSS
    </title>
    <style>
        iframe {
            border: none;
            height: 200px;
            width: 400px;
        }
    </style>
</head>
<body>
    <h3>
        Removing border from IFrame using CSS
    </h3>
    <p>
        In this example we have used CSS
        <strong>border</strong> property to
        remove the border from IFrame using CSS.
    </p>
    <iframe src="/css/index.htm"></iframe>
</body>
</html>

使用 border-width 属性移除 iframe 边框

在这种方法中,我们将使用 border-width 属性,该属性指定任何元素的边框宽度。

  • 我们使用 CSS height 和 width 属性设置了 iframe 窗口的尺寸。
  • 我们使用 CSS **"border-width: 0;"** 属性将边框宽度值设置为 0,从而移除 iframe 的边框。

示例

这是一个完整的示例代码,实现了上述步骤,使用 CSS border-width 属性从 iframe 中移除边框。

<html>
<head>
    <title>
        Remove border from IFrame using CSS
    </title>
    <style>
        iframe {
            height: 200px;
            width: 400px;
            border-width: 0;
        }
    </style>
</head>
<body>
    <h3>
        Removing border from IFrame using CSS
    </h3>
    <p>
        In this example we have used CSS
        <strong>border-width</strong> property to
        remove the border from IFrame using CSS.
    </p>
    <iframe src="/css/index.htm"></iframe>
</body>
</html>

结论

在本文中,我们了解了如何使用 CSS 从 iframe 中移除边框。我们讨论了三种从 iframe 中移除边框的方法:使用 **frameborder** HTML 属性(其值可以是 0 或 1),使用 CSS **border** 和使用 **border-width** 属性。CSS border-width 属性不会从 iframe 中移除边框,而是由于宽度为零而隐藏边框,并且在某些浏览器中 frameborder CSS 属性已弃用,因此建议使用 CSS border 属性。

更新于: 2024年8月5日

7K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.