使用CSS创建圆角
我怎样才能创建使用CSS圆角？
自引入CSS3以来，使用CSS添加圆角的最佳方法是使用border-radius属性。 您可以阅读该属性的规范 ，或者在MDN上获取一些有用的实现信息 ：
如果您使用的浏览器没有 实现 border-radius （Chrome pre-v4，Firefox pre-v4，IE8，Opera pre-v10.5，Safari pre-v5），那么下面的链接会详细介绍一大堆不同的方法。 找到一个适合您的网站和编码风格，并与它一起去。
- CSS设计：创建自定义角落和边框
- CSS圆角'综述'
- CSS圆角技术
在Stack Overflow的创建中，我很早就注意到了这个问题，并且找不到任何创建圆角的方法， 这些方法并没有让我感觉像是刚刚走过一个下水道。
CSS3确实最终定义了
border-radius:
这正是你想要它的工作。 虽然这在最新版本的Safari和Firefox中是行得通的，但在IE7（而我不认为是在IE8中）或Opera并不是。
与此同时，它是一路下滑。 我有兴趣听到其他人认为目前在IE7，FF2 / 3，Safari3和Opera 9.5上最干净的方法。
我通常只是用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上运行的很好。
如果你有兴趣在IE中创建角落，那么这可能是有用的 – http://css3pie.com/
我会推荐使用背景图片。 其他的方式并没有那么好：没有反锯齿和无意义的标记。 这不是使用JavaScript的地方。
正如Brajeshwar所说：使用border-radius css3选择器。 现在，您可以分别为Mozilla和基于Webkit的浏览器应用-moz-border-radius和-webkit-border-radius 。
那么，Internet Explorer会发生什么？ 微软有许多行为可以使Internet Explorer有一些额外的功能，并获得更多的技能。
在这里：一个.htc行为文件从你的CSS中的border-radius值得到border-radius 。 例如。
div.box { background-color: yellow; border: 1px solid red; border-radius: 5px; behavior: url(corners.htc); }
当然，行为选择器不是一个有效的选择器，但你可以把它放在不同的CSS文件与条件注释（只适用于IE）。
宏达文件的行为
通过在Firefox，Safari和Chrome的新版本中实现对CSS3的支持，查看“边界半径”也是有帮助的。
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
就像其他的CSS简写一样，上面也可以用扩展的格式来写，从而实现不同的边界半径，例如顶点，顶点等。
-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;
jQuery是我个人处理这个问题的方式。 CSS的支持是最小的，图像太繁琐，为了能够选择你想要在jQuery的圆角的元素对我来说是完全合理的，即使有些人会毫无疑问地辩论。 这是我最近在这里使用的一个项目插件： http ： //plugins.jquery.com/project/jquery-roundcorners-canvas
总有JavaScript的方式（见其他答案），但由于它是纯粹的样式，我反对使用客户端脚本来实现这一点。
我喜欢的方式（尽管它有其限制）是使用4个圆角的图像，您将使用CSS在您的框的四个角落中定位：
<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; }
如前所述，它有其局限性（圆框背后的背景应该是平淡的，否则角落将不匹配背景），但是对于其他任何东西都是非常有效的。
更新：通过使用精灵表来改进实现。
我个人喜欢这个解决方案最好，它的.htc允许IE渲染弯曲的边界。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
在Safari浏览器，Chrome浏览器，Firefox> 2，IE> 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。
国际海事组织，CSS的方式更好，因为它很容易，并会在不支持它的浏览器优雅地退化。 当然，这仅仅是客户端不支持IE等不支持的浏览器的情况。
这是我最近做的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(csshttp://img.dovov.comorange_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个角部打包在一起。 看起来像一个圆圈。
注意：您不需要第二个内部包装，但是我喜欢在内部包装上使用边距，以便段落和标题上的边距仍然保持边距折叠。 你也可以跳过jquery，并把内部包装器放在html中。
作为一个圆角运转有多复杂的指标，即使是雅虎也不鼓励它们 （见第一个标题）！ 诚然，他们只是谈论那篇文章中的1个像素的圆角，但有趣的是，即使是一家拥有专业知识的公司，他们也总是觉得让他们大部分时间都工作起来太痛苦了。
如果你的设计能够在没有它们的情况下生存，那么这是最简单的解
当然，如果它是固定的宽度，使用CSS是非常容易的，而且一点也不讨厌或费力。 当你需要它在两个方向上扩展时，事情就会变得不稳定。 一些解决方案有一个惊人的数量互相叠加，使之发生。
我的解决方案是向设计者说明，如果他们想要使用圆角（暂时），它需要是一个固定的宽度。 设计师喜欢圆角（所以我），所以我觉得这是一个合理的妥协。
Ruzee Borders是唯一一款基于Javascript的反锯齿圆角解决方案，我发现它适用于所有主流浏览器（Firefox 2/3，Chrome，Safari 3，IE6 / 7/8），也是唯一适用于圆角元素和父元素都包含背景图像。 它也做边界，阴影和发光。
较新的RUZEE.ShadedBorder是另一种选择，但它不支持从CSS获取样式信息。
如果你要去边界的解决方案，有这个真棒网站生成的CSS将使Safari浏览器/铬/ FF的工作。
无论如何，我认为你的设计不应该依赖于圆角，如果你看看Twitter，他们只会对IE和Opera用户说F ****。 圆角是一个很好的，我个人好，保持这个不酷的用户谁不使用IE浏览器:)。
当然，这不是客户的意见。 这里是链接： http : //border-radius.com/
为了增加上面提到的HTC解决方案，这里是另一个解决方案和例子在IE中达到圆角 。
没有“最好”的方法; 有些方法可以为你工作，而有些方法则不适用。 话虽如此，我发布了一篇关于在这里创建基于CSS +图像的流体圆角技术的文章：
使用CSS和图像的圆角框 – 第2部分
这个技巧的概述是使用嵌套的DIV和背景图像的重复和定位。 对于固定宽度的布局（固定宽度可拉伸高度），您需要三个DIV和三个图像。 对于流体宽度布局（可拉伸的宽度和高度），您将需要九个DIV和九个图像。 有些人可能认为它太复杂，但恕我直言，它是有史以来最好的解决方案。 没有黑客，没有JavaScript。
这段时间我写了一篇博客文章，所以更多的信息请看这里
<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得到广泛的支持，这将是官方制作圆角的最佳方式。
不要使用CSS，多次提到jQuery。 如果您需要完全控制元素的背景和边框，请尝试使用jQuery Background Canvas插件 。 它将HTML5 Canvas元素放置在背景中，并允许您绘制所需的每个背景或边框。 圆角，渐变等。
Opera不支持border-radius（显然它将在版本10之后的版本中）。 同时，您可以使用CSS设置SVG背景来创建类似的效果 。
