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

Question

有人能告诉我使用DIV标签实现圆角的最新解决方案吗？ PNG角落图像仍然是最佳的跨浏览器解决方案吗？ Jquery是最好的方法吗？每个人如何接近圆角问题？

非常感谢。

埃里克

Answer 1

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

http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

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

不再需要图像了。

Answer 2

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

根据微软的页面：

  

Windows Internet Explorer 9   支持添加圆角   使用border-radius的元素   属性。

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

25 Rounded Corners Techniques with CSS

CSS Rounded Corners 'Roundup'

Rounded Corners

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

Answer 3

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

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

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

far 旧版IE的最佳解决方法是use CSS3 PIE：

  

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

     

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

     

• border-radius
  •盒子阴影
  •border-image
  •多个背景图像
  •线性渐变作为背景图像

正如您所看到的，您还可以获得更多CSS3眼睛糖果的支持