使用CSS创建圆角

我如何使用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。

2008-10-16 23:47:47

其他回答

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

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

2008-09-03 18:23:58

不要使用CSS, jQuery已经被提到过好几次了。如果你需要完全控制你的元素的背景和边界，可以试试jquery背景画布插件。它在背景中放置了一个HTML5 Canvas元素，并允许你绘制你想要的每个背景或边界。圆角，渐变等等。

2009-08-31 12:34:38

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

2008-08-10 08:51:29

在创建Stack Overflow的早期，我看到了这一点，我找不到任何创造圆角的方法，让我感觉自己就像走过下水道一样。