使用CSS创建圆角

我如何使用CSS创建圆角?

当前回答

如果你要使用边界-半径解决方案，有一个很棒的网站可以生成css，使它适用于safari/chrome/FF。

无论如何，我认为你的设计不应该依赖于圆角，如果你看看Twitter，他们只是对IE和opera用户说F****。圆角是一个很好的选择，我个人认为这是为那些不使用IE的酷用户保留的:)。

当然，这不是客户的意见。链接如下:http://border-radius.com/

其他回答

Ruzee Borders是我发现的唯一一个基于javascript的反锯齿圆角解决方案，适用于所有主流浏览器(Firefox 2/3, Chrome, Safari 3, IE6/7/8)，也是唯一一个在圆角元素和父元素都包含背景图像时工作的解决方案。它还可以处理边界、阴影和发光。

更新的RUZEE。ShadedBorder是另一个选项，但是它缺乏从CSS中获取样式信息的支持。

自从引入CSS3以来，使用CSS添加圆角的最好方法是使用border-radius属性。你可以阅读属性的规范，或者在MDN上获得一些有用的实现信息:

如果您使用的浏览器没有实现border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5)，那么下面的链接详细介绍了一大堆不同的方法。找一个适合你的网站和编码风格的，然后使用它。

CSS设计:创建自定义角 &边界 CSS圆角'Roundup' 25圆角技术与CSS

Opera目前还不支持border-radius(显然在版本10之后才会支持)。同时，您可以使用CSS设置SVG背景来创建类似的效果。

我个人最喜欢这个解决方案，它的.htc允许IE渲染弯曲的边界。

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

在Safari, Chrome, Firefox > 2, IE > 8和Konquerer(可能还有其他)中，你可以在CSS中使用border-radius属性。由于它还不是规范的正式部分，请使用特定于供应商的前缀…

例子

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

JavaScript解决方案通常会添加一堆小的div来使它看起来圆角，或者使用边框和负边距来制作1px的缺口角。有些还可能在IE中使用SVG。

在我看来，CSS的方式更好，因为它很简单，并且在不支持它的浏览器中会优雅地降级。当然，这只是客户端在不受支持的浏览器(如IE < 9)中不强制执行它们的情况。

推荐文章