我如何使用CSS创建圆角?


当前回答

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

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

其他回答

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

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


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

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

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

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

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

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