使用CSS创建圆角

Question

如何使用CSS创建圆角？

Answer 1

自从引入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 Rounded Corners'Opupup'
3. 使用CSS的25角圆角技术

Answer 2

我在Stack Overflow的创作中很早就看到了这一点,并且找不到任何创建圆角的方法,这些方法并没有让我觉得我只是走过了下水道.

CSS3最终确定了

border-radius:

这正是你想要它的工作方式.虽然这在最新版本的Safari和Firefox中运行正常,但在IE7中完全没有(我不认为在IE8中)或Opera.

与此同时,它一直是黑客攻击.我很想听听其他人认为目前在IE7,FF2/3,Safari3和Opera 9.5上最干净的方法.

Answer 3

我通常只用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上运行得非常好.

Answer 4

如果你有兴趣在IE中创建角落,那么这可能是有用的 - http://css3pie.com/

Answer 5

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

Answer 6

正如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文件的行为

Answer 7

由于支持在较新版本的Firefox,Safari和Chrome中实现CSS3,因此查看"Border Radius"也会很有帮助.

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

Answer 8

jQuery是我亲自处理这个问题的方式.css支持很少,图像太繁琐,能够选择你想要在jQuery中拥有圆角的元素对我来说是完全合理的,尽管有些人无疑会争辩.这是我最近用于工作项目的插件:http://plugins.jquery.com/project/jquery-roundcorners-canvas

Answer 9

总是采用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;
}

如上所述,它有其局限性(圆形框背后的背景应该是平坦的,否则角落将与背景不匹配),但它对其他任何东西都非常有效.

更新:使用精灵表改进了实现.

Answer 10

这是我最近做的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中.

Answer 11

在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)中强制执行它们的情况.

Answer 12

我个人最喜欢这个解决方案,它是一个允许IE呈现弯曲边框的.htc.

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