如何使用 CSS 创建圆角？
问问题
71297 次
21 回答
81
我在创建 Stack Overflow 的早期就看到了这一点，找不到任何创建圆角的方法，这不会让我觉得我只是穿过下水道。
border-radius:
这正是您希望它工作的方式。虽然这在最新版本的 Safari 和 Firefox 中可以正常工作，但在 IE7（我不认为在 IE8 中）或 Opera 中根本不行。
与此同时，它一直是黑客攻击。我很想听听其他人认为目前在 IE7、FF2/3、Safari3 和 Opera 9.5 上执行此操作的最干净的方法。
于 2008-08-10T08:28:52.100 回答
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 上运行良好。
于 2009-07-13T18:20:00.087 回答
16
If you're interested in creating corners in IE then this may be of use - http://css3pie.com/
于 2010-07-27T10:58:15.043 回答
13
我建议使用背景图片。其他方式则不太好：没有抗锯齿和无意义的标记。这里不是使用 JavaScript 的地方。
于 2008-08-10T08:51:29.167 回答
11
正如 Brajeshwar 所说：使用border-radiuscss3 选择器。至此，您可以分别申请-moz-border-radius和-webkit-border-radius用于基于 Mozilla 和 Webkit 的浏览器。
那么，Internet Explorer 会发生什么？微软有很多行为让 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）。
行为HTC 文件
于 2009-03-13T20:47:18.733 回答
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;
于 2009-01-21T12:41:10.407 回答
8
jQuery 是我个人处理这个问题的方式。css 支持很少，图像太繁琐，能够在 jQuery 中选择想要圆角的元素对我来说非常有意义，尽管有些人无疑会反对。我最近在这里的一个项目中使用了一个插件：http://web.archive.org/web/20111120191231/http://plugins.jquery.com:80 / project/jquery-roundcorners-canvas
于 2008-08-12T20:01:45.490 回答
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;
}
如前所述，它有其局限性（圆角框后面的背景应该是纯色的，否则角与背景不匹配），但它适用于其他任何东西。
更新：通过使用精灵表改进了实现。
于 2008-08-11T17:23:09.197 回答
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;
}
图片只有 18 像素宽，所有 4 个角都挤在一起。看起来像一个圆圈。
注意：您不需要第二个内包装，但我喜欢在内包装上使用边距，以便段落和标题的边距仍然保持边距折叠。您也可以跳过 jquery，只需将内部包装器放在 html 中。
于 2008-10-16T23:47:47.147 回答
5
在 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 解决方案通常会添加一堆小divs 以使其看起来圆润，或者它们使用边框和负边距来制作 1px 的凹角。有些人可能还会在 IE 中使用 SVG。
IMO，CSS方式更好，因为它很容易，并且会在不支持它的浏览器中优雅地降级。当然，这只是客户端在不支持的浏览器（例如 IE < 9）中不强制执行它们的情况。
于 2009-05-05T03:50:41.100 回答
5
我个人最喜欢这个解决方案，它是一个 .htc，允许 IE 呈现弯曲的边框。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
于 2009-09-21T10:17:04.243 回答
2
当然，如果它是一个固定的宽度，使用 CSS 就超级容易，而且一点也不令人反感或费力。当你需要它在两个方向上扩展时，事情就会变得不稳定。一些解决方案有大量的 div 堆叠在一起以实现它。
我的解决方案是告诉设计师，如果他们想使用圆角（暂时），它需要是一个固定的宽度。设计师喜欢圆角（我也喜欢），所以我认为这是一个合理的折衷方案。
于 2008-09-03T18:23:58.980 回答
2
Ruzee Borders是我发现的唯一一个基于 Javascript 的抗锯齿圆角解决方案，适用于所有主要浏览器（Firefox 2/3、Chrome、Safari 3、IE6/7/8），并且也是唯一一个在以下情况下有效的解决方案圆角元素和父元素都包含背景图像。它也做边界、阴影和发光。
较新的RUZEE.ShadedBorder是另一种选择，但它不支持从 CSS 获取样式信息。
于 2008-09-27T20:16:35.290 回答
1
没有“最好”的方法；有些方法对您有用，也有些方法无效。话虽如此，我在这里发表了一篇关于创建基于 CSS+Image 的流畅圆角技术的文章：
这个技巧的概述是使用嵌套的 DIV 和背景图像重复和定位。对于固定宽度布局（固定宽度可拉伸高度），您需要三个 DIV 和三个图像。对于流体宽度布局（可拉伸的宽度和高度），您需要九个 DIV 和九个图像。有些人可能认为它太复杂了，但恕我直言，它是有史以来最简洁的解决方案。没有黑客，没有 JavaScript。
于 2010-03-19T09:46:00.310 回答
1
如果您要使用边框半径解决方案，有这个很棒的网站可以生成 css，使其适用于 safari/chrome/FF。
Anyway, I think your design should not depend on the rounded corner, and if you look at Twitter, they just say F**** to IE and opera users. Rounded corners is a nice to have, and I'm personally ok keeping this for the cool users who don't use IE :).
Now of course it's not the opinion of the clients. Here is the link : http://border-radius.com/
于 2010-04-21T21:17:43.043 回答
1
To addition of htc solutions mention above, here're another solutions and examples to reach rounded corners in IE.
于 2011-03-31T13:15:40.773 回答
0
不久前我写了一篇关于此的博客文章，因此有关更多信息，请参见此处
<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 特定的 hack，并且在检查后似乎根本不起作用。另外，另一个技巧是使每个角落图像的内部部分透明，这样它就不会阻挡角落附近的文本。外部不能是透明的，这样它就可以覆盖非圆形 div 的边框。
此外，一旦 CSS3 得到广泛的border-radius 支持，这将是官方制作圆角的最佳方式。
于 2008-08-22T12:41:23.597 回答
0
不要使用 CSS，jQuery 已经被多次提及。如果您需要完全控制元素的背景和边框，请尝试使用jQuery Background Canvas Plugin 。它在背景中放置一个 HTML5 Canvas 元素，并允许您绘制所需的每个背景或边框。圆角、渐变等。
于 2009-08-31T12:34:38.177 回答
-1
Opera 还不支持边界半径（显然它将在版本 10 之后的版本中）。同时，您可以使用 CSS 设置 SVG 背景来创建类似的效果。
于 2009-08-31T12:43:04.127 回答