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

Question

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

Answer 1

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

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

Answer 2

Простыми словами:

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

А те, которые созданы с помощью CSS3, работают в современных браузерах, но не в IE <9. </p>

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

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

• CSS3Pie

Пирог делает 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

плагин jQuery lc_roundz 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  
});