了解IFrame如何在網站設計中使用
當您在HTML中嵌入元素時，您有兩種向其添加CSS樣式的機會：
- 您可以設置IFRAME本身的樣式。
- 您可以在IFRAME中設置頁面的樣式（在特定條件下）。
使用CSS來設置IFRAME元素的樣式
在設計iframe時應考慮的第一件事就是IFRAME本身。 儘管大多數瀏覽器都包含沒有多餘樣式的iframe，但添加一些樣式以保持一致性仍然是個不錯的主意。
以下是我總是包含在我的iframe中的一些CSS樣式：
- 保證金：0;
- 填充：0;
- border：none;
- 寬度： 值 ;
- 身高： 價值 ;
將寬度和高度設置為適合我文檔的大小。 下面是一個沒有樣式的框架示例，只有基本樣式的框架示例。 正如您所看到的，這些樣式大多只是刪除iframe的邊框，但它們也確保所有瀏覽器都顯示具有相同邊距，填充和尺寸的iframe。
HTML5建議您使用overflow屬性來刪除滾動條，但這不可靠。 所以如果你想刪除或者更改滾動條，你也應該在你的iframe上使用滾動屬性。 要使用滾動屬性，請像添加其他任何屬性一樣添加它，然後從三個值中選擇一個：yes，no或auto。 是告訴瀏覽器始終包含滾動條，即使它們不需要。 沒有說刪除所有滾動條，無論是否需要。
auto是默認設置，它們在需要時包含滾動條，當它們不需要時將其移除。
以下是如何關閉滾動屬性的滾動功能：
scrolling =“no”>
這是一個iframe。
要關閉在HTML5中的滾動，你應該使用overflow屬性。 但是，正如您在這些示例中看到的那樣，它在所有瀏覽器中都無法可靠運行。
以下是您如何打開所有使用overflow屬性滾動的方法：
style =“overflow：scroll;”>
這是一個iframe。
沒有辦法通過溢出屬性完全關閉滾動。
許多設計師希望他們的iframe與他們所在頁面的背景相融合，以便讀者不知道iframe即使在那裡。 但是你也可以添加樣式來使它們脫穎而出。 調整邊框以使iframe更容易顯示。 只需使用邊框樣式屬性（或其相關的邊框頂部，邊框右側，邊框左側和底部邊框屬性）來設置邊框的樣式：
iframe {
border-top：＃c00 1px dotted;
border-right：＃c00 2px dotted;
border-left：＃c00 2px dotted;
border-bottom：＃c00 4px dotted;
}
但是你不應該停下來為你的風格進行滾動和邊框。 您可以將許多其他CSS樣式應用於您的iframe。 這個例子使用CSS3樣式給iframe一個陰影，圓角，並旋轉20度。
iframe {
margin-top：20px;
margin-bottom：30px;
-moz-border-radius：12px;
-webkit-border-radius：12px;
border-radius：12px;
-moz-box-shadow：4px 4px 14px＃000;
-webkit-box-shadow：4px 4px 14px＃000;
box-shadow：4px 4px 14px＃000;
-moz變換：旋轉（20deg）;
-webkit變換：旋轉（20deg）;
-o-變換：旋轉（20deg）;
-ms變換：旋轉（20deg）;
濾波器：的progid：DXImageTransform.Microsoft.BasicImage（旋轉= 0.2）;
}
設計Iframe內容的樣式
樣式化iframe的內容就像設計其他任何網頁一樣。 但是，您必須有權編輯該頁面 。 如果您無法編輯頁面（例如，它在另一個網站上）。