圆角的最新解决方案是什么？答案

【问题标题】：What's the latest solution for rounded corners?圆角的最新解决方案是什么？
【发布时间】：2011-05-30 04:58:49
【问题描述】：

谁能告诉我用 DIV 标签实现圆角的最新解决方案？ PNG角图像仍然是最好的跨浏览器解决方案吗？ Jquery 是最好的方法吗？大家是如何解决圆角问题的？

非常感谢。

埃里克

【问题讨论】：

【解决方案1】：

对于大多数浏览器，CSS3 提供了一种方式。

.rounded-corners {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

不再需要图像了。

【讨论】：

【解决方案2】：

如果您必须支持 IE8 及更早版本，here 是实现圆角的多种方法。

根据那个微软页面：

Windows Internet Explorer 9 支持添加圆角到使用边界半径的元素属性。

它还建议这些声称已更新的页面：

如果没有阅读所有这些方法，我会冒险猜测目前没有通用的最佳解决方案。在我们可以假设几乎所有访问者都使用符合 CSS3 的浏览器之前，您必须做出一些选择。

【讨论】：

【解决方案3】：

目前的最佳解决方案是使用：

selector {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

这将适用于“所有”现代浏览器，包括 IE9，请参阅：http://caniuse.com/#search=border-radius

到目前为止，对于旧版本的 IE，最好的解决方法是use CSS3 PIE：

PIE 使 Internet Explorer 6-8 能够渲染几个最有用的 CSS3 装饰功能。

PIE 目前有全部或部分支持以下 CSS3 特点：

• 边界半径
• 盒子阴影
• 边框图像
• 多个背景图片
• 线性渐变作为背景图片

如您所见，您还获得了对更多 CSS3 吸引眼球的支持

【讨论】：