CSS div圓角

Question

我正在嘗試做以下事情......

這就是我現在所擁有的......但它沒有正確渲染。 有沒有人知道我如何解決這個問題？

CSS

    /* Curved Corners */
    .bl {
background: url(bl.gif) 0 100% no-repeat;
/*background-color:#EFFBEF;*/
width: 700px;
margin-left: auto ;
margin-right: auto ;}
    .br {
background: url(br.gif) 100% 100% no-repeat;
}
    .tl {
background: url(tl.gif) 0 0 no-repeat;
}
    .tr {
background: url(tr.gif) 100% 0 no-repeat;
}
    .clear {font-size: 1px; height: 1px}

HTML

    <div class="bl"><div class="br"><div class="tl"><div class="tr">

        <div id="header">

    </div>

    <div id="footer">

    </div>

        </div></div></div></div>

Answer 1

相反，我建議你使用CSS3，與其他方法不同，它不需要無關的HTML或Javascript標記，眾所周知會導致任何圓角元素在頁面加載時“閃爍”。

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -o-border-radius: 10px;
 -ms-border-radius: 10px;
 -khtml-border-radius: 10px;
 border-radius: 10px;

這個生成器也很有幫助： http ： //borderradius.com/ ，還有另一個在http://css3generator.com上

在大多數（如果不是全部）瀏覽器的最新版本中， border-radius: 10px; 工作得很好，並且在適當的時候，瀏覽器特定的聲明將被淘汰。

為了使邊界半徑在IE6,7和8中工作，嘗試使用ms-border-radius js庫 ，雖然我還沒有測試過（有人回復說它不起作用。）我個人的意見是，如果有人還在使用這些瀏覽器，互聯網必須在日常生活中看起來像一個奇怪而可怕的地方，因此，他們不會錯過他們的圓角。

旁白：當CSS3沒有得到廣泛支持時，您嘗試使用的方法更適用。 它是在互聯網的一個奇怪時期創建的，當時IE6的普及推動了無數網絡開發人員為其他簡單問題找到高度非語義的創造性解決方案。 非常感謝Internet Explorer在我們的生活中度過了幾年，並減緩了網頁設計和開發的進程。

Answer 2

總有一些曲線 ，如果瀏覽器支持它，它會使用原生css來提高速度，如果瀏覽器不支持，則使用javascript。

Answer 3

可以使用jQuery圓角round_corner輕松完成

 $(document).ready(function(){
   $("#b1").corner();
 });

您無需擔心jQuery方法的跨瀏覽器問題。

Answer 4

所有主流瀏覽器的精彩摘要，告訴您如何圍繞每個角落或所有角落：

http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/

Answer 5

相反，只需將此代碼放在您想要圓角的類中。它肯定會起作用。

-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;