使用CSS创建圆角

我怎样才能创建使用CSS圆角?

自引入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圆角'综述'
  3. 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背景来创建类似的效果 。