使用CSS创建圆角

我如何使用CSS创建圆角?

当前回答

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

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

其他回答

在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)中不强制执行它们的情况。

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

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

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

当然，如果它是一个固定的宽度，它是超级容易使用CSS，而不是在所有冒犯或费力。当你需要向两个方向扩展时，情况就会变得不稳定。有些解决方案将大量的divs堆叠在一起以实现这一目标。

我的解决方案是告诉设计师，如果他们想使用圆角(暂时)，它需要一个固定的宽度。设计师喜欢圆角(我也是)，所以我觉得这是一个合理的妥协。

没有“最好”的方法;有适合你的方法也有不适合你的方法。话虽如此，我在这里发布了一篇关于创建CSS+图像的流畅圆角技术的文章:

使用CSS和图像的圆角盒子-第2部分

这个技巧的概述是使用嵌套的div和背景图像重复和定位。对于固定宽度的布局(固定宽度可拉伸的高度)，你需要三个div和三张图片。对于流体宽度布局(可拉伸宽度和高度)，您需要9个div和9张图像。有些人可能会认为这太复杂了，但恕我直言，这是有史以来最简洁的解决方案。没有黑客，没有JavaScript。

推荐文章