Angoli più arrotondati con CSS3 o con immagini?

Question

Qual è la differenza e il modo migliore per crearli adesso?

Answer 1

CSS3, sicuramente. È più veloce e più pulito ed è supportato su tutti i principali browser. IE ha bisogno di (sorpresa, sorpresa) un workaround though:

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

Answer 2

In parole semplici:

gli angoli arrotondati creati con le immagini dovrebbero e lavoro in tutti i browser.

e quelli creati con il lavoro CSS3 nei browser moderni, ma non il IE < 9.

Qual è la differenza e il modo migliore per creare loro in questo momento?

È consigliabile utilizzare il prefisso borer-radius di CSS3 insieme ai prefissi specifici del fornitore per i browser moderni. Per ottenere angoli arrotondati che lavorano in IE pure, è possibile utilizzare:

• CSS3Pie

PIE rende Internet Explorer 6-8 in grado di rendere alcune delle caratteristiche più utili decorazione CSS3.

Ecco un esempio di cross-browser angoli arrotondati:

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

Answer 3

È possibile utilizzare il plugin jQuery CurvyCorners

se non si desidera utilizzare CSS3

Answer 4

il plugin lc_roundz jQuery http://coffeelog.itsatony.com/?p=86 farà il lavoro in modo dinamico - anche se si desidera che gli angoli siano trasparenti (ad esempio per l'uso su sfondi complessi, ...).

$("#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 
});