如何用CSS样式IFrames

当您将元素嵌入超文本标记语言，您有两次将CSS样式添加到IT：

• 你可以样式

  iframe.

  本身。
• 控件内的页面样式

  iframe.

  （在某些条件下）。

使用CSS将IFRAME元素的样式样式

在造型时，您应该考虑的第一件事是

iframe.

• 本身。虽然大多数浏览器包括Iframe，但没有大量额外的样式，但它仍然是一个好主意，添加一些样式以保持它们保持一致。以下是我们始终包含的一些CSS风格iframes.：

  边缘：0;

• 填充：0;

• 边界:没有;

• 宽度：价值;

• 高度：价值;

与

宽度

和

高度

设置为适合我的文档大小。下面是一个没有样式的框架和一个只有基本样式的框架的例子。如您所见，这些样式大多只是删除了iframe周围的边框，但它们也确保所有浏览器以相同的边距、填充和尺寸显示iframe。HTML5建议您使用

溢出

属性中删除滚动条卷轴盒，但那是不可能的。因此，如果要删除或更改滚动条，则应使用

滚动

您的Iframe也会在Iframe上属性。用来

滚动

属性，像添加其他属性一样添加它，然后从以下三个值中选择一个:

是的

那

没有

， 或者

汽车

。

是的

告诉浏览器始终包括滚动条，即使它们不需要。

没有

说是否需要删除所有滚动条。

汽车

是默认值，需要时包含滚动条，不需要时删除滚动条。控件关闭滚动的方法

滚动
属性：滚动=“否”>
这是一个ifframe。

要在HTML5中关闭滚动，您应该使用

溢出

财产。但正如您在这些例子中看到的，它还不能在所有浏览器中可靠地工作。这里是你如何打开滚动的所有时间

溢出
属性：STYLE =“溢出：滚动;”>
这是一个ifframe。

有没有办法关闭完全滚动

溢出

财产。许多设计师希望他们的IFrame在他们上的页面背景中混合，以便读者不知道IFRame甚至存在。但您也可以添加风格以使它们脱颖而出。调整边框使IF帧更容易出现。只是用来

边境

样式属性(或者与其相关

边缘

那

边界权

那

边框左边

,

边境
属性）符合边框：iframe {
边框-顶部:#c00 1px虚线;
Border-right: #c00 2px虚线;
边框 - 左：＃C00 2px点缀;
边框-底部:#c00 4px虚线;
}

但是你不应该停止滚动和边界的风格。您可以将许多其他CSS样式应用于iframe。此示例使用CSS3样式来为iframe表示阴影，圆角，并将其旋转20度。

iframe {
边缘 - 顶级：20px;
边缘：30px;
-moz边界半径：12px;
-webkit边界半径：12px;
边界半径：12px;
-moz-box阴影：4px 4px 14px＃000;
-webkit-box阴影：4px 4px 14px＃000;
Box-shadow: 4px 4px 14px #000;
-moz-transform:旋转(20度);
-webkit变换：旋转（20deg）;
-o-transform：旋转（20deg）;
-ms-transform:旋转(20度);
过滤器:progid: DXImageTransform.Microsoft.BasicImage(旋转=。2);
}

打造IFRAME内容

样式化iframe的内容就像样式化任何其他网页一样。但是,你必须有权限编辑页面。如果您无法编辑页面（例如，它在另一个站点上）。

如果可以编辑页面，那么您可以就像您在网站上的任何其他网页一样在文档中添加外部样式表或样式。