如何使用CSS创建圆角？
使用CSS创建圆角[关闭]
Opera还不支持边界半径（显然它将在版本10之后的版本中）。同时，您可以使用CSS设置SVG背景来创建类似的效果。
我前一段时间写了一篇博客文章，所以有关更多信息，请参见此处
<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特定的hacks，经检查后似乎根本不起作用。另外，另一个技巧是使每个角图像的内部透明，以免遮挡角附近的文本。外部部分不得透明，以免遮盖非圆形div的边界。
而且，一旦CSS3广泛地受到边界半径的支持，这将成为制作圆角的官方最佳方法。
没有“最好的”方法。有些方法对您有用，而有些方法却没有。话虽如此，我在这里发表了一篇有关创建基于CSS + Image的圆角圆角技术的文章：
此技巧的概述是使用嵌套的DIV以及背景图像的重复和定位。对于固定宽度的布局（固定宽度的可拉伸高度），您将需要三个DIV和三个图像。对于可变宽度的布局（可拉伸的宽度和高度），您将需要9个DIV和9个图像。有些人可能认为它太复杂了，但是恕我直言，它是迄今为止最简洁的解决方案。没有黑客，没有JavaScript。
除了上面提到的htc解决方案之外，这里还有另一个解决方案和示例，可以解决IE中的各种问题。
如果您要使用border-radius解决方案，那么可以使用这个很棒的网站来生成CSS，以使其可用于Safari / chrome / FF。
无论如何，我认为您的设计不应取决于圆角，而如果您查看Twitter，他们只会向IE和歌剧用户说F ****。圆角是一个不错的选择，对于没有使用IE的酷用户，我个人认为可以保留它：)。
现在，这当然不是客户的意见。这是链接：http : //border-radius.com/
当然，如果宽度是固定的，那么使用CSS超级容易，而且一点也不冒犯或费力。当您需要在两个方向上进行缩放时，事情会变得不稳定。一些解决方案使彼此叠放的div数量惊人，以使其实现。
我的解决方案是告诉设计师，如果他们想使用圆角（暂时），则必须为固定宽度。设计师喜欢圆角（我也是），因此我认为这是一个合理的折衷方案。
我发现Ruzee Borders是唯一可在所有主要浏览器（Firefox 2/3，Chrome，Safari 3，IE6 / 7/8）上运行的唯一基于Javascript的抗锯齿圆角解决方案，而ALSO在以下情况下也是唯一可行的解决方案：圆形元素和父元素都包含背景图像。它还具有边框，阴影和发光效果。
较新的RUZEE.ShadedBorder是另一个选项，但是它不支持从CSS获取样式信息。
在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解决方案通常会添加一堆small div使其看起来很圆，或者使用边框和负边距使1px的缺口角变大。有些人可能会在IE中利用SVG。
IMO，CSS方法比较好，因为它很容易，并且会在不支持CSS的浏览器中正常降级。当然，这仅是客户端未在不受支持的浏览器（例如IE <9）中强制实施的情况。
我个人最喜欢此解决方案，它是一个允许IE渲染弯曲边框的.htc。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
由于在较新版本的Firefox，Safari和Chrome中实现了对CSS3的支持，因此查看“边界半径”也将很有帮助。
-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;
jQuery是我亲自处理的方式。css支持很少，图像太笨拙了，即使有些人无疑会反对，但能够选择想要在jQuery中具有圆角的元素对我来说是很合理的。有一个我最近在这里工作的项目使用的插件：http : //plugins.jquery.com/project/jquery-roundcorners-canvas
我建议使用背景图片。其他方法几乎没有那么好：没有抗锯齿和毫无意义的标记。这不是使用JavaScript的地方。
如果您有兴趣在IE中创建角落，则可能有用-http://css3pie.com/
我在创建Stack Overflow的早期就已经注意到了这一点，但是找不到任何创建圆角的方法，这种方法并没有让我感到自己只是穿过下水道。
border-radius:
正是您希望它如何工作。尽管这在Safari和Firefox的最新版本中可以正常工作，但在IE7（我认为在IE8中也不是）或Opera中根本不起作用。
同时，它一直都在被黑客入侵。我很想听听其他人认为目前在IE7，FF2 / 3，Safari3和Opera 9.5上执行此操作最干净的方法。
正如Brajeshwar所说：使用border-radiuscss3选择器。现在，你可以申请-moz-border-radius，并-webkit-border-radius为Mozilla和Webkit基于各自的浏览器。
那么，Internet Explorer会怎样？Microsoft有许多行为使Internet Explorer具有一些额外的功能并获得更多的技能。
此处：从CSS的价值中.htc获取价值的行为文件。例如。round-cornersborder-radius
div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}
当然，行为选择器不是有效的选择器，但是您可以将其置于带有条件注释的其他CSS文件中（仅适用于IE）。
如果浏览器不支持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上完美运行。
不要使用CSS，jQuery已经被多次提及。如果您需要完全控制元素的背景和边框，请尝试使用jQuery背景画布插件。它将HTML5 Canvas元素放置在背景中，并允许您绘制所需的每个背景或边框。圆角，渐变等。