使用CSS创建圆角[关闭]


253

如何使用CSS创建圆角?


这是一个很好的视频,介绍如何仅使用CSS制作圆角:< sampsonvideos.com/video.php?video=12 >
Stan

Yahoo Developer Network 上有关圆角技术的文章 -从2007年开始。还有一种将圆角(需要图像)添加到YUI窗格的方法
2009年

3
200多个赞说它具有建设性。
SteveCav 2015年

1
我认为这是一个有价值的规范问题,值得重新讨论,特别是因为它现在是社区Wiki。
DavidRR

只是可以在网络上许多其他地方轻松找到的信息。SO无需复制现有资源。
Jim Garrison 2015年

Answers:


102

自从引入CSS3以来,使用CSS添加圆角的最佳方法是使用border-radius属性。您可以阅读有关该属性的规范,或获取有关MDN的一些有用的实现信息

如果您使用的浏览器 实现 border-radius(Chrome v4之前的版本,Firefox v4之前的版本,IE8,Opera v10.5之前的版本,Safari v5之前的版本),则下面的链接详细介绍了许多不同的方法。找到适合您的网站和编码风格的一种,然后选择它。

  1. CSS设计:创建自定义的角和边框
  2. CSS圆角'Roundup'
  3. CSS的25种圆角技巧

1
我觉得DD_roundies是知府的解决方案:dillerdesign.com/experiment/DD_roundies/#nogo
VSYNC


5
如果您决定使用CSS3(例如SO)border-radius.com(另一个参考号css3.info/border-radius-apple-vs-mozilla)的有用链接
mickthompson 2010年


80

我在创建Stack Overflow的早期就已经看到了这一点,找不到任何创建圆角的方法,这并没有让我觉得自己只是穿过下水道。

CSS3确实定义

border-radius:

正是您希望它如何工作。虽然这在Safari和Firefox的最新版本中可以正常工作,但在IE7(我认为在IE8中也不是)或Opera中根本不起作用。

同时,它一直都在被黑客入侵。我有兴趣听到其他人认为目前在IE7,FF2 / 3,Safari3和Opera 9.5上执行此操作最干净的方法。


5
“ ...穿过下水道?” 杰夫,这有点苛刻。答案是“取决于情况”。单色,渐变还是阴影框?它们是否需要垂直,水平或同时扩展?针对不同需求的不同解决方案。要求越高,解决方案就越像下水道。
卡尔相机

28
我更喜欢使用这种方法。如果浏览器不支持它,谁在乎呢?
山姆·默里·萨顿

11
Twitter将圆角功能降级为IE用户将其网站上的尖角。确实没什么大不了的。
兰斯·费舍尔

5
我肯定会使用这种方法-让我们按原样处理。如果某人不使用浏览器(即IE),则应将圆角视为有角的。:)
thSoft

1
我想否决这个答案,因为它没有描述回答者(Jeff)认为最好的方法。
allyourcode 2010年

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上都能很好地工作。



13

我建议使用背景图片。其他方法则差强人意:没有抗锯齿和毫无意义的标记。这不是使用JavaScript的地方。


1
javascript绝对有最大的失败范围,而根据我的经验,它会闪烁。我尝试过的所有jquery插件都有某种意外的副作用
Simon_Weaver

CurvyCorners(curvycorners.net)和ShadedBorder(ruzee.com/blog/shadedborder确实支持抗锯齿。还有一些使用这些额外标记的方法,您可以使用一个类来实现,然后将标记动态添加到分类的元素中。也就是说,我使用它们的次数越多,您看起来就越正确……它们对于原型设计很有用,但会给DOM增加很多额外的负担。现在,我已经按照自己的方式进行了调整,我打算将它们转换为图像。
本·雷根斯潘09年

1
这个答案没有足够多的细节来使某人实现答疑者的想法。
allyourcode 2010年

11

正如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)。

行为HTC文件


4
从来没有理解过为什么这么多人关心CSS验证。没关系,只有DOM验证才重要。
vsync

这看起来像是要走的路。
马修·奥莱尼克

3
您能否对行为文件添加简短说明?我认为寻找这个问题的答案的人可能不会熟悉这些。
allyourcode 2010年

2
行为文件链接似乎已失效
evanmcd 2010年

9

由于在较新版本的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;

1
-webkit-border-bottom-rightright-radius的语法:3px;和-webkit-border-top-rightrightradius:10px; 应该阅读-webkit-border-bottom-right-radius:3px和-webkit-border-top-right-radius:10px;
沃尔夫,2009年


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;
}

如前所述,它有其局限性(圆角框后面的背景应该是纯色的,否则拐角处的背景将不匹配),但是对于其他任何东西,它的效果都很好。


已更新:通过使用Sprite表改进了定音。


可以使用CSS Sprite简化所有操作,也许我会更新答案。
mbillard

在那里,我更新了代码以使用精灵表。
mbillard


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解决方案通常添加一堆small div使其看起来很圆,或者使用边框和负边距使1px的缺口角变大。有些人可能会在IE中利用SVG。

IMO,CSS方法比较好,因为它很容易,并且会在不支持CSS的浏览器中正常降级。当然,这仅是客户端未在不受支持的浏览器(例如IE <9)中强制实施的情况。


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;
}

图片只有18px宽,并且所有4个角落都塞在一起。看起来像个圆圈。

注意:您不需要第二个内部包装器,但是我喜欢在内部包装器上使用margin,以便段落和标题的边距仍然保持边距折叠。您也可以跳过jquery,仅将内部包装放入html中。


3

为了表明圆角工作的复杂性,雅虎甚至不鼓励它们使用(请参见第一个项目符号)!诚然,他们在该文章中仅谈论1个像素的圆角,但有趣的是,即使是一家拥有专业知识的公司也得出结论,他们很难承受大部分时间的工作。

如果您的设计可以在没有它们的情况下生存下来,那是最简单的解决方案。


我想找到您正在谈论的YUI页面的一部分,但是我看过的所有要点都没有说试图弄圆角是个坏主意。你可以说得更详细点吗?我发现有一部分讨论了有关使用圆角时必须如何设置宽度的讨论,但并不阻止这样做。
allyourcode 2010年

@allyourcode-我也看不到它。我记得发表这篇文章,但不完全是他们所说的。但是,看起来在上面的第二个链接中,他们提到删除了IE对1px圆角的支持。但是无论如何,由于他们只谈论1px的角,所以这个帖子有点面颊,我认为这是浪费大量时间!我确实记得当时我写的这篇文章大体上是圆角的,并定居在角落的图像上
Simon_Weaver

2

当然,如果宽度是固定的,那么使用CSS超级简单,而且一点也不冒犯或费力。当您需要在两个方向上进行缩放时,事情会变得不稳定。一些解决方案使彼此叠放的div数量惊人,以使其实现。

我的解决方案是告诉设计师,如果他们想使用圆角(暂时),则必须为固定宽度。设计师喜欢圆角(我也是),所以我认为这是一个合理的折衷方案。


2

我发现Ruzee Borders是唯一可在所有主要浏览器(Firefox 2/3,Chrome,Safari 3,IE6 / 7/8)上运行的唯一基于Javascript的抗锯齿圆角解决方案,而ALSO在以下情况下也是唯一可行的解决方案:圆形元素和父元素都包含背景图像。它还具有边框,阴影和发光效果。

较新的RUZEE.ShadedBorder是另一个选项,但是它不支持从CSS获取样式信息。


1

如果您要使用border-radius解决方案,那么可以使用这个很棒的网站来生成CSS,以使其可用于Safari / chrome / FF。

无论如何,我认为您的设计不应取决于圆角,如果您查看Twitter,他们只会向IE和歌剧用户说F ****。圆角是一个不错的选择,对于没有使用IE的酷用户,我个人认为可以保留它:)。

现在,这当然不是客户的意见。这是链接:http : //border-radius.com/



1

没有“最好的”方法。有些方法对您有效,而有些方法则无效。话虽如此,我在这里发表了一篇有关创建基于CSS + Image的圆角技术的文章:

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

此技巧的概述是使用嵌套的DIV以及背景图像的重复和定位。对于固定宽度的布局(固定宽度的可拉伸高度),您将需要三个DIV和三个图像。对于可变宽度布局(可拉伸的宽度和高度),您将需要九个DIV和九个图像。有些人可能认为它太复杂了,但是恕我直言,它是迄今为止最简洁的解决方案。没有黑客,没有JavaScript。


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特定的黑客工具,经检查后似乎根本无法使用。另外,另一个技巧是使每个角图像的内部透明,以免遮挡角附近的文本。外部一定不能透明,这样才能覆盖非圆形div的边界。

而且,一旦CSS3得到广泛的边框半径支持,这将成为制作圆角的官方最佳方法。


0

不要使用CSS,jQuery已经被多次提及。如果您需要完全控制元素的背景和边框,请尝试使用jQuery背景画布插件。它将HTML5 Canvas元素放置在背景中,并允许您绘制所需的每个背景或边框。圆角,渐变等。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.