使用CSS创建圆角

我如何使用CSS创建圆角?

72527 次浏览
小开
最佳答案

自引入CSS3以来，使用CSS添加圆角的最佳方法是使用border-radius属性。你可以在属性上阅读说明书，或者得到一些MDN上有用的实现信息:

如果你使用的浏览器是不 实现 border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5)，那么下面的链接详细介绍了一大堆不同的方法。找一个适合你的网站和编码风格的，然后使用它。

  1. CSS设计:创建自定义角 ,李边界< / > < / >
  2. CSS圆角'Roundup'
  3. 25圆角技巧与CSS
小开

我在创建Stack Overflow的早期就看过这个，并且找不到任何方法来创建圆角，而不让我觉得我刚刚走过下水道。

CSS3最终定义了的

border-radius:

这正是你想要的效果。虽然这在最新版本的Safari和Firefox中运行正常，但在IE7或Opera中就完全不行(我想在IE8中也不行)。

与此同时，这一切都是黑客所为。我很想听听其他人认为在IE7、FF2/3、Safari3和Opera 9.5之间实现这一点的最干净的方法是什么。

小开

我建议使用背景图片。其他方法就没有这么好了:没有抗锯齿和无意义的标记。这不是使用JavaScript的地方。

小开

总有JavaScript的方式(见其他答案)，但因为它是纯粹的样式，我有点反对使用客户端脚本来实现这一点。

我更喜欢的方式(虽然它有其局限性)，是使用4圆角图像，你将定位在你的盒子的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;
}

如前所述，它有其局限性(圆角框后面的背景应该是普通的，否则角就不会与背景相匹配)，但它适用于其他任何东西。

通过使用精灵表改进了实现。

小开

jQuery是我个人处理这个问题的方法。css的支持是最低限度的，图像太精细，能够选择你想在jQuery圆角的元素对我来说是完美的，即使有些人会毫无疑问地反对。这里有一个我最近在工作项目中使用的插件:http://web.archive.org/web/20111120191231/http://plugins.jquery.com:80/project/jquery-roundcorners-canvas

小开

我写了一篇关于这个的博客文章，所以更多信息，在这里看到的

<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发布的非常相似，但不包含任何ie6的特定hack，经过检查，似乎根本不起作用。另外，另一个技巧是使每个角落图像的内部部分透明，这样它就不会挡住角落附近的文本。外部部分不能是透明的，这样可以掩盖非圆角div的边框。

此外，一旦CSS3广泛支持border-radius，这将是官方制作圆角的最佳方法。

小开

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

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

小开

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

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

小开

这是我最近做的一个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个角都打包在一起。看起来像一个圆。

注意:你不需要第二个内包装，但我喜欢在内包装上使用边距，这样段落和标题的边距仍然保持边距折叠。 你也可以跳过jquery，只把内部包装器放在html中
小开

随着对CSS3的支持在Firefox、Safari和Chrome的新版本中实现，看看“边界半径”也会有帮助。

-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;
小开

作为使圆角工作是多么复杂的指示，甚至雅虎不鼓励他们(见第一个项目符号点)!当然，他们在那篇文章中只谈论了1像素的圆角，但有趣的是，即使是一家拥有他们专业知识的公司也得出结论，大多数时候他们只是太痛苦了。

如果你的设计可以在没有它们的情况下存活，这就是最简单的解决方案。

小开

正如Brajeshwar所说:使用border-radius css3选择器。到目前为止，您可以分别为基于Mozilla和Webkit的浏览器应用-moz-border-radius和-webkit-border-radius。

那么，ie浏览器会发生什么呢?微软有许多行为使ie浏览器有一些额外的功能，并获得更多的技能。

这里:一个.htc行为文件，用于从CSS中的border-radius值中获取round-corners。为例。

div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}

当然，行为选择器不是一个有效的选择器，但你可以把它放在一个不同的css文件与条件注释(仅适用于IE)。

的行为HTC文件

小开

在Safari, Chrome, Firefox等;2、IE >你可以在CSS中通过使用border-radius属性来实现。由于它还不是规范的正式部分，请使用特定于供应商的前缀…

例子

#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

JavaScript解决方案通常会添加一堆小的__abc，使它看起来圆角，或者使用边框和负边距来制造1px的缺口角。有些还可能在IE中使用SVG。

在我看来，CSS的方式更好，因为它很简单，并且在不支持它的浏览器中会优雅地降级。当然，这只是客户端在不受支持的浏览器(如IE <)中不强制执行的情况;9.

小开

我通常得到圆角只是与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已经被提到过好几次了。如果你需要完全控制元素的背景和边框，可以试试__abc0。它在背景中放置了一个HTML5 Canvas元素，并允许你绘制你想要的每个背景或边界。圆角，渐变等等。

小开

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

小开

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

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

小开

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

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

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

小开

如果你要使用边界-半径解决方案，有一个很棒的网站可以生成css，使它适用于safari/chrome/FF。

无论如何，我认为你的设计不应该依赖于圆角，如果你看看Twitter，他们只是对IE和opera用户说F****。圆角是一个很好的选择，我个人认为这是为那些不使用IE的酷用户保留的:)。

当然，这不是客户的意见。 下面是链接:http://border-radius.com/

小开

如果你对在IE中创建角感兴趣，那么这个可能会有用- http://css3pie.com/

小开

除了上面提到的htc解决方案，这里还有另一个解决方案和例子来实现IE圆角。


提交答案