Угловые углы с CSS3 или с изображениями?

Question

Какая разница и лучший способ создать их прямо сейчас?

Answer 1

CSS3, определенно. Это быстрее и чище и поддерживается всеми основными браузерами. IE нуждается (сюрприз, сюрприз) а workaround though:

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

Answer 2

В простых словах:

Закругленные углы, созданные с изображениями должны и работать во всех браузерах.

И те, которые создаются с CSS3 работы в современных браузерах, но не IE < 9.

В чем разница и лучший способ создать их прямо сейчас?

Вы должны использовать свойство CSS3 borer-radius, а также префиксы для конкретных производителей для современных браузеров. Для того, чтобы получить закругленные углы, работающие в IE, а также, вы можете использовать:

• CSS3Pie

PIE делает Internet Explorer 6-8 способны оказывать некоторые из наиболее полезных особенностей оформления CSS3.

Вот пример кросс-браузерных закругленные углы:

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

Answer 3

Вы можете использовать JQuery плагин CurvyCorners

, если вы не хотите использовать CSS3

Answer 4

плагин lc_roundz JQuery http://coffeelog.itsatony.com/?p=86 сделает работу динамически - даже если вы хотите, чтобы углы были прозрачными (например, для использования на сложных фонов, ...).

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