Div容器清理？

只是想知道是否可以清理（更少的代碼需要做同樣的事情）使這個div容器。基本上它只是一個具有背景圖像的div，但頂部& div的底部有圓角的圖形角落，這就是爲什麼我在容器div中有頂部，中部和底部div的原因。Div容器清理？

<div class="fbox"> 
<div class="ftop"></div> 
<div class="fmid"> 

Fullbox Text Goes Here 

</div> 
<div class="fbot"></div> 
</div>

的CSS：

.fbox { 
    width: 934px; 
    margin: 0 auto; 
    opacity: 0.70; 
} 

.ftop { 
    width: 934px; 
    background:url(../images/cb/full.png) no-repeat 0 -34px; 
    height: 17px; 
    margin:0 
} 
.fmid { 
    width: 894px; 
    padding-left: 20px; 
    padding-right: 20px; 
    background:url(../images/cb/fullmid.png) repeat-y; 
    min-height: 50px; 
    margin:0 
} 
.fbot { 
    width: 934px; 
    background:url(../images/cb/full.png) no-repeat 0 -17px; 
    height: 17px; 
    margin:0 
}

結果： http://img709.imageshack.us/img709/6681/fbox.jpg

來源

2010-12-22 Nto

您可以使用border-radius CSS屬性。在Firefox中，您將使用-moz-border-radius，而在WebKit中，您將使用-webkit-border-radius。我通常會使用這三種。這將繞過盒子的角落，而不需要所有額外的div。

當然，IE的用戶是S.O.L.但有時候你必須稍微花一點時間，對不對？ :)

<div id="box">Blah blah blah.</div> 
#box{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}

來源

2010-12-22 21:32:44

不是我所要求的..我知道邊界半徑，但它不適用於FF以外的其他因素，這就是爲什麼我以圖形方式做到這一點。我正在嘗試僅使用CSS2以及兼容X瀏覽器。 – Nto 2010-12-22 21:38:11

最簡單的方法是使用border-radius，但它在所有瀏覽器中都不兼容。支持體面。此外，覆蓋所有支持的瀏覽器需要供應商特定的代碼，這是一種煩人：

-webkit-border-radius: 4px; /* Vendor code */ 
-moz-border-radius: 4px; /* Vendor code */ 
border-radius: 4px; /* CSS 3 Standard */

您可以添加邊框邊框圓角的div應用，它會跟着一輪的角落，你會希望。

來源

2010-12-22 21:33:45

不是我真正要求的。我知道邊界半徑，但它不適用於FF以外的其他因素，這就是爲什麼我以圖形方式做到這一點。我正在嘗試僅使用CSS2以及兼容X瀏覽器。 – Nto 2010-12-22 21:36:08

Firefox，Opera，Safari，Chrome支持邊框半徑，供應商特定的代碼使得不同版本的webkit和gecko能夠爲我所瞭解的許多移動設備正確渲染 - 我個人認爲現在值得一試。對不起，我無法提供更好的答案！ – 2010-12-22 21:38:57

http://www.the-art-of-web.com/css/border-radius/

您可以使用CSS邊框半徑有一個DIV而不是創建頂部和底部。 IE不會意識到這一點，但也有一些方便的解決方法。

我將通常使用CSS3 PIE，這是IE瀏覽器的htc行爲。它做了一些其他的東西，如線性漸變背景顏色等。你所做的只是爲每個瀏覽器提供邊框半徑的CSS，瀏覽器將知道使用哪一個。 http://css3pie.com/

.yourbox { 
    /* PIE Sample */ 
    border: 1px solid #696; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    behavior: url(/PIE.htc); 
}

您真正需要的是其他瀏覽器圓角半徑的東西雖然。

來源

2010-12-22 21:35:10 Cole

如果您必須使用它聽起來像的圖像。創建一個具有所需邊框的圖像文件，並使用特殊的CSS選擇器來調整背景位置，以便不加載3個不同的背景圖像。

.fbox .border { 
    background: url(bg.png); 
} 
.border.mid { 
    background-position: center center; 
    background-repeat: repeat-y 
} 
.border.top { 
    background-position: top left; 
    background-repeat: no-repeat 
}

等等等等

我不能說正是你將如何調整BG的位置，因爲這將取決於你的使用恆定的固定寬度您使用的圖像，以及是否。但我強烈建議只使用一個圖像，然後使用額外的選擇器來移動bg位置。

來源

2010-12-22 21:50:55 Cole

Div容器清理？

回答

相關問題