Html 带CSS3或带图像的圆角？

现在创建它们的区别和最佳方式是什么？

简单地说：

使用图像创建的圆角应该可以在所有浏览器中使用

而那些使用CSS3创建的浏览器在现代浏览器中工作，但在IE<9中不起作用

什么是区别和最好的 现在如何创建它们

对于现代浏览器，您应该使用CSS3的

borer radius

属性以及特定于供应商的前缀。要在IE中获得圆角，您可以使用：

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);
}

---

当然是CSS3。它更快更干净，在所有主流浏览器上都受支持。IE需要（惊喜，惊喜）a:

---

您可以使用jQuery插件

---

如果您不想使用css3，jQuery插件lc_roundz将动态执行此任务，即使您希望角点透明（例如，用于复杂背景，…）

---

IIRC IE8也不支持它们。几乎每一篇文章都必须以“除IE外”结尾。几个小的拼写错误“borer radius Property”（就在第一个引号之后）。我正要添加CSSPIE。它非常棒，适用于所有IE版本，它还支持其他CSS3功能，如渐变和阴影。顺便说一下，基于webkit的浏览器现在不需要-webkit前缀

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

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