CSS div zaokrąglone rogi

Question

Próbuję wykonać następujące czynności:

Oto, co mam teraz ... ale nie renderuje się poprawnie. Czy ktoś ma jakiś pomysł, jak to naprawić?

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

Zamiast tego proponuję użyć CSS3, która w przeciwieństwie do innych metod, nie wymaga obcych HTML lub JavaScript znaczników, które notorycznie powoduje żadnych zaokrąglony elementu "flashować" po załadowaniu strony.

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

Generator ten jest również pomocny: http://borderradius.com/ i tam jest jeszcze jeden na http://css3generator.com

w najnowszej wersji większość (jeśli nie wszystkie) przeglądarek border-radius: 10px; działa dobrze, oraz w odpowiednim czasie, przeglądarka specyficzny deklaracje będą przestarzałe.

Aby uczynić pracę promienia granicznego w IE6, 7 i 8, spróbuj ms-border-radius js library, choć jej nie testowane (i odpowiedział ktoś, że to nie działa.) Moja osobista opinia jest taka, że ​​nadal, jeśli ktoś używa tych W przeglądarkach internet musi wyglądać jak dziwne i przerażające miejsce na co dzień, a więc nie ominie ich zaokrąglonych rogów.

Na bok: Metoda, której próbujesz użyć, była bardziej odpowiednia, gdy CSS3 nie był tak szeroko obsługiwany. Powstał w dziwnym okresie Internetu, kiedy popularność IE6 doprowadziła niezliczonych twórców stron internetowych do znalezienia wysoce nieantantycznych twórczych rozwiązań dla prostych problemów. Dziękujemy Internet Explorerze za kilka lat przerwy w naszym życiu i spowolnienie postępu projektowania i tworzenia stron internetowych.

Answer 2

Fantastyczny podsumowanie dla wszystkich głównych przeglądarek, z informacją, jak zaokrąglić każdy z rogów lub wszystkie narożniki:

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

Answer 3

tam zawsze curvycorners jak dobrze, że używa natywnego css dla prędkości, czy przeglądarka obsługuje lub wraca do javascript, jeśli przeglądarka nie.

Answer 4

można łatwo zrobić z jQuery zaokrąglone narożniki rounded_corner

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

nie trzeba się martwić o kwestie poprzecznych przeglądarka z podejścia jQuery.

Answer 5

Zamiast tego po prostu umieść ten kod w klasie, w której chcesz zaokrąglić rogi. To na pewno zadziała.

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