Zaokrąglone narożniki z CSS3 lub ze zdjęciami?

Question

Jaka jest różnica i najlepszy sposób ich utworzenia właśnie teraz?

Answer 1

CSS3, zdecydowanie. Jest szybszy i czystszy i jest obsługiwany we wszystkich głównych przeglądarkach. IE potrzebuje (niespodzianka, niespodzianka) A workaround though:

-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
behavior: url(border-radius.htc); 

Answer 2

W prostych słowach:

zaokrąglone narożniki utworzone z obrazami powinien i praca we wszystkich przeglądarkach.

A te utworzone z pracą CSS3 w nowoczesnych przeglądarek, ale nie IE < 9.

Jaka jest różnica i najlepszy sposób utworzyć je teraz?

Należy używać propozycję CSS3 borer-radius wraz z prefiksami specyficznymi dla dostawcy dla nowoczesnych przeglądarek. Aby uzyskać zaokrąglone narożniki pracuje w IE, jak również, można użyć:

• CSS3Pie

PIE sprawia Internet Explorer 6-8 stanie zapewnić kilku najbardziej przydatnych funkcji CSS3 dekoracji.

Oto przykład z różnych przeglądarkach zaokrąglonymi narożnikami:

#myAwesomeElement { 
    border: 1px solid #999; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(path/to/PIE.htc); 
} 

Answer 3

Można użyć jQuery Plugin CurvyCorners

jeśli nie chcesz korzystać z CSS3

Answer 4

plugin lc_roundz jQuery http://coffeelog.itsatony.com/?p=86 będzie wykonać zadanie dynamicznie - nawet jeśli chcesz, aby narożniki były przezroczyste (np. do użycia na złożonym tle, ...).

$("#image").lc_roundz({ 
radius: 20, // corner-radius 
newDadSelector: "", // jQuery style selector string to allow attachment anywhere in the DOM. empty string will inject the canvas next to the original 
newid: "%oid_after_lc_roundz",  // the new ID for the canvas object. %oid will be replaced with the id of the original object 
width: -1,               // -1 uses the original image's width 
height: -1,     // -1 uses the original image's width 
replace: false,           // boolean to decide whether the original should be removed from the DOM 
corner_color: [0,0,0,0]      // this means TRANSPARENT ... R,G,B,alpha [0-255] each 
});