如何使用CSS创建圆角？
答案 0 :(得分：99)
由于引入了CSS3，使用CSS添加圆角的最佳方法是使用border-radius属性。您可以在酒店read the spec或获得一些useful implementation information on MDN：
如果您使用的浏览器为doesn't implement border-radius（Chrome pre-v4，Firefox pre-v4，IE8，Opera pre-v10.5，Safari pre-v5） ，然后下面的链接详细介绍了一堆不同的方法。找到一个适合您的网站和编码风格，并与它一起使用。
答案 1 :(得分：80)
我在创建Stack Overflow的过程中很早就看到了这一点，并且找不到创建圆角的任何方法，这种方法并没有让我觉得我只是走过了下水道。
border-radius:
这正是您希望它如何工作的原因。虽然这在最新版本的Safari和Firefox中运行正常，但在IE7中完全没有（我不认为在IE8中）或Opera。
与此同时，它一直是黑客攻击。我很想听听其他人认为目前在IE7，FF2 / 3，Safari3和Opera 9.5上做到这一点最干净的方式..
答案 2 :(得分：27)
我通常只使用css获得圆角，如果浏览器不支持，他们会看到带有平角的内容。如果圆角对您的网站不是那么重要，您可以使用下面的这些行。
如果你想使用半径相同的所有角落，这很容易：
.my_rounded_corners{
-webkit-border-radius: 5px;
border-radius: 5px;
}
但是如果你想控制每个角落，这是好的：
.my_rounded_corners{
border: 1px solid #ccc;
/* each value for each corner clockwise starting from top left */
-webkit-border-radius: 10px 3px 0 20px;
border-radius: 10px 3px 0 20px;
}
正如您在每个集合中看到的那样，您拥有浏览器特定的样式，并且在第四行中我们以标准方式声明，我们假设将来其他人（希望IE也是如此）决定实现该功能以使我们的风格为他们也是。
正如在其他答案中所说，这适用于Firefox，Safari，Camino，Chrome。
答案 3 :(得分：16)
如果您对在IE中创建角落感兴趣，那么这可能有用 - http://css3pie.com/
答案 4 :(得分：13)
我建议使用背景图片。其他方式并不是那么好：没有抗锯齿和无意义的标记。这不是使用JavaScript的地方。
答案 5 :(得分：11)
正如Brajeshwar所说：使用border-radius css3选择器。到目前为止，您可以分别为基于Mozilla和Webkit的浏览器应用-moz-border-radius和-webkit-border-radius。
那么，Internet Explorer会发生什么？ Microsoft有许多行为可以使Internet Explorer具有一些额外的功能并获得更多技能。
此处：.htc行为文件，用于从CSS中的round-corners值获取border-radius。例如。
div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}
当然，行为选择器不是有效的选择器，但您可以将其放在带有条件注释的不同css文件中（仅适用于IE）。
答案 6 :(得分：9)
由于支持在较新版本的Firefox，Safari和Chrome中实施CSS3，因此查看“Border Radius”也很有帮助。
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
与任何其他CSS速记一样，上面也可以用扩展格式编写，从而为topleft，topright等实现不同的Border Radius。
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 7px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 3px;
答案 7 :(得分：8)
jQuery就是我亲自处理这个问题的方式。 css支持很少，图像太繁琐，能够选择你想要在jQuery中拥有圆角的元素对我来说是完全合理的，尽管有些人无疑会争辩。这是我最近用于工作项目的插件：http://plugins.jquery.com/project/jquery-roundcorners-canvas
答案 8 :(得分：6)
总是采用JavaScript方式（参见其他答案），但由于它纯粹是样式化的，所以我反对使用客户端脚本来实现这一点。
我喜欢的方式（虽然它有其限制），是使用4个圆角图像，你将使用CSS定位在盒子的4个角落：
<div class="Rounded">
<!-- content -->
<div class="RoundedCorner RoundedCorner-TopLeft"></div>
<div class="RoundedCorner RoundedCorner-TopRight"></div>
<div class="RoundedCorner RoundedCorner-BottomRight"></div>
<div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>
/********************************
* Rounded styling
********************************/
.Rounded {
position: relative;
}
.Rounded .RoundedCorner {
position: absolute;
background-image: url('SpriteSheet.png');
background-repeat: no-repeat;
overflow: hidden;
/* Size of the rounded corner images */
height: 5px;
width: 5px;
}
.Rounded .RoundedCorner-TopLeft {
top: 0;
left: 0;
/* No background position change (or maybe depending on your sprite sheet) */
}
.Rounded .RoundedCorner-TopRight {
top: 0;
right: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: -5px 0;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
right: -1px;
}
.Rounded .RoundedCorner-BottomLeft {
bottom: 0;
left: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: 0 -5px;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
bottom: -20px;
}
.Rounded .RoundedCorner-BottomRight {
bottom: 0;
right: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: -5px -5px;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
bottom: -20px;
right: -1px;
}
如上所述，它有其局限性（圆形框后面的背景应该是平坦的，否则角落将与背景不匹配），但它对其他任何东西都很有效。
更新：使用精灵表改进了实施。
答案 9 :(得分：5)
我个人最喜欢这个解决方案，它是一个允许IE呈现弯曲边框的.htc。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
答案 10 :(得分：5)
这是我最近做过的HTML / js / css解决方案。在IE中有绝对定位的1px舍入误差，因此您希望容器的宽度为偶数像素，但它非常干净。
HTML：
<div class="s">Content</div>
jQuery：
$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');
CSS：
/*rounded corner orange box - no title*/
.s {
position: relative;
margin: 0 auto 15px;
zoom: 1;
}
.s-iwrap {
border: 1px solid #FF9933;
}
.s-iwrap2 {
margin: 12px;
}
.s .br,.s .bl, .s .tl, .s .tr {
background: url(css/images/orange_corners_sprite.png) no-repeat;
line-height: 1px;
font-size: 1px;
width: 9px;
height: 9px;
position: absolute;
}
.s .br {
bottom: 0;
right: 0;
background-position: bottom right;
}
.s .bl {
bottom: 0;
left: 0;
background-position: bottom left;
}
.s .tl {
top: 0;
left: 0;
background-position: top left;
}
.s .tr {
top: 0;
right: 0;
background-position: top right;
}
图像宽度仅为18px，并且所有4个角都打包在一起。看起来像一个圆圈。
注意：你不需要第二个内包装，但我喜欢在内包装上使用margin，这样段落和标题的边距仍然会保持边距崩溃。 您也可以跳过jquery，只需将内包装放在html中。
答案 11 :(得分：5)
在Safari，Chrome，Firefox＆gt; 2，IE＆gt; 8和Konquerer（可能还有其他人）你可以使用border-radius属性在CSS中完成它。由于它尚未正式作为规范的一部分，请使用供应商特定的前缀...
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
JavaScript解决方案通常会添加一堆小div以使其看起来呈圆形，或者它们使用边框和负边距来制作1px缺角。有些人也可能在IE中使用SVG。
IMO，CSS方式更好，因为它很容易，并且会在不支持它的浏览器中优雅地降级。当然，这仅仅是客户端不在诸如IE＆lt;之类的非支持的浏览器中强制执行它们的情况。 9。
答案 12 :(得分：3)
表明圆角的工作有多复杂，甚至是Yahoo discourages them（参见第一个项目符号点）！当然，在这篇文章中他们只讨论了1个像素的圆角，但有趣的是，即使是一家拥有专业知识的公司也认为他们在大多数情况下都会感到非常痛苦to get them working。
如果您的设计能够在没有它们的情况下生存，那么这是最简单的解决方案。
答案 13 :(得分：2)
Ruzee Borders是我发现的唯一基于Javascript的抗锯齿圆角解决方案，适用于所有主流浏览器（Firefox 2/3，Chrome，Safari 3，IE6 / 7/8）和ALSO圆形元素和父元素都包含背景图像时唯一有效的方法。它还可以做边框，阴影和发光。
较新的 RUZEE.ShadedBorder是另一种选择，但它不支持从CSS获取样式信息。
答案 14 :(得分：2)
当然，如果它是一个固定的宽度，使用CSS非常容易，而且根本不是冒犯性或费力的。当你需要它向两个方向扩展时，事情变得不稳定。一些解决方案将大量的div堆叠在一起以实现它。
我的解决方案是向设计师指示如果他们想要使用圆角（暂时），则需要固定宽度。设计师喜欢圆角（我也是如此），所以我发现这是一个合理的妥协。
答案 15 :(得分：1)
没有“最好的”方式;有些方法适合你，有些方法不适合你。话虽如此，我在这里发布了一篇关于创建基于CSS +图像的流体圆角技术的文章：
Box with Round Corners Using CSS and Images - Part 2
这个技巧的概述是使用嵌套的DIV和背景图像重复和定位。对于固定宽度布局（固定宽度可拉伸高度），您需要三个DIV和三个图像。对于流体宽度布局（可拉伸的宽度和高度），您需要9个DIV和9个图像。有些人可能认为它过于复杂，但恕我直言是有史以来最好的解决方案。没有黑客，没有JavaScript。
答案 16 :(得分：1)
如果您要使用border-radius解决方案，那么有一个非常棒的网站可以生成css，使其适用于safari / chrome / FF。
无论如何，我认为你的设计不应该依赖于圆角，如果你看看Twitter，他们只会对IE和歌剧用户说F ****。圆角是一个很好的，我个人可以保持这个为不使用IE的酷用户:)。
现在当然不是客户的意见。 这是链接：http://border-radius.com/
答案 17 :(得分：1)
要添加上面提到的htc解决方案，这里是另一个达到rounded corners in IE的解决方案和示例。
答案 18 :(得分：0)
不要使用CSS，jQuery已被多次提及。如果您需要完全控制元素的背景和边框，请尝试jQuery Background Canvas Plugin。它在背景中放置一个HTML5 Canvas元素，允许你绘制你想要的每个背景或边框。圆角，渐变等。
答案 19 :(得分：0)
前一段时间我写了一篇博客文章，所以有关更多信息，see here
<div class="item_with_border">
<div class="border_top_left"></div>
<div class="border_top_right"></div>
<div class="border_bottom_left"></div>
<div class="border_bottom_right"></div>
This is the text that is displayed
</div>
<style>
div.item_with_border
{
border: 1px solid #FFF;
postion: relative;
}
div.item_with_border > div.border_top_left
{
background-image: url(topleft.png);
position: absolute;
top: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_top_right
{
background-image: url(topright.png);
position: absolute;
top: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_left
{
background-image: url(bottomleft.png);
position: absolute;
bottom: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_right
{
background-image: url(bottomright.png);
position: absolute;
bottom: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
</style>
效果很好。不需要Javascript，只需要CSS和HTML。最小的HTML干扰其他东西。它与Mono发布的内容非常相似，但不包含任何IE 6特定的黑客攻击，并且在检查后，似乎根本不起作用。另外，另一个技巧是使每个角落图像的内部部分透明，这样它就不会阻挡角落附近的文本。外部部分不得透明，以便它可以掩盖非圆形div的边界。
此外，一旦CSS3广泛支持border-radius，这将是制作圆角的官方最佳方式。
答案 20 :(得分：-1)
Opera还不支持border-radius（显然它将在版本10之后发布）。在此期间，您可以use CSS to set an SVG background to create a similar effect。