使用 CSS 创建圆角

Question

如何使用 CSS 创建圆角？

Answer 1

不要使用CSS，jQuery已经被提到过好几次了。 如果您需要完全控制元素的背景和边框，请提供jQuery 后台画布插件 尝试一下。 它将 HTML5 Canvas 元素放置在背景中，并允许您绘制您想要的每个背景或边框。 圆角、渐变等。

Answer 2

Opera 还不支持 border-radius （显然会在版本 10 之后的版本中提供）。 同时，您可以使用 CSS 设置SVG 背景创建类似的效果。

Answer 3

jQuery 是我个人处理这个问题的方式。 css 支持很少，图像太繁琐，能够在 jQuery 中选择你想要圆角的元素对我来说非常有意义，尽管有些人无疑会反对。 我最近在工作中使用了一个插件： http://web.archive.org/web/20111120191231/http://plugins.jquery.com:80/project/jquery-roundcorners-canvas

Answer 4

没有“最好”的方法； 有些方法适合你，有些方法不适合你。 话虽如此，我在这里发布了一篇关于创建基于 CSS+Image 的流体圆角技术的文章：

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

此技巧的概述是使用嵌套 DIV 和背景图像重复和定位。 对于固定宽度布局（固定宽度可拉伸高度），您需要三个 DIV 和三个图像。 对于流体宽度布局（可拉伸的宽度和高度），您需要九个 DIV 和九个图像。 有些人可能认为它太复杂，但恕我直言，它是有史以来最简洁的解决方案。 没有 hack，没有 JavaScript。

Answer 5

当然，如果它是固定宽度，那么使用 CSS 就非常容易，而且一点也不冒犯或费力。 当你需要它在两个方向上扩展时，事情就会变得不稳定。 有些解决方案需要将数量惊人的 div 堆叠在一起才能实现这一点。

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

Answer 6

Ruzee Borders 是我发现的唯一基于 Javascript 的抗锯齿圆角解决方案适用于所有主要浏览器（Firefox 2/3、Chrome、Safari 3、IE6/7/8），也是唯一一种在圆形元素和父元素都包含背景图像时适用的浏览器。 它还可以处理边框、阴影和发光。

较新的 RUZEE.ShadedBorder 是另一种选择，但它缺乏从 CSS 获取样式信息的支持。

Answer 7

如果您要使用 border-radius 解决方案，可以使用这个很棒的网站来生成 css，使其适用于 safari/chrome/FF。

无论如何，我认为你的设计不应该依赖于圆角，如果你看看 Twitter，他们只是对 IE 和 Opera 用户说 F****。 圆角是一个很好的东西，我个人同意为不使用 IE 的酷用户保留它:)。

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

Answer 8

除了上面提到的 htc 解决方案之外，这里还有另一个解决方案和示例来达到 rounded IE 中的角。

Answer 9

我不久前写了一篇关于此的博客文章，因此有关更多信息，请参阅此处

<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 特定的 hack，并且经过检查，似乎根本不起作用。 另外，另一个技巧是使每个角图像的内部部分透明，这样它就不会遮挡角附近的文本。 外部部分不能是透明的，这样它就可以覆盖非圆形 div 的边框。

此外，一旦 CSS3 广泛支持 border-radius，这将成为官方制作圆角的最佳方式。

Answer 10

随着较新版本的 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 11

正如 Brajeshwar 所说：使用 border-radius css3 选择器。 现在，您可以分别为基于 Mozilla 和 Webkit 的浏览器应用 -moz-border-radius 和 -webkit-border-radius。

那么，Internet Explorer 会发生什么情况呢？ 微软有很多行为让Internet Explorer拥有一些额外的功能并获得更多的技能。

这里：一个 .htc 行为文件，用于从 CSS 中的 border-radius 值获取圆角。 例如。

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

当然，行为选择器并不是一个有效的选择器，但是你可以将它放在带有条件注释的不同css文件中（仅适用于IE）。

行为 HTC 文件

Answer 12

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

Answer 13

如果您有兴趣在 IE 中创建角点，那么这可能会有用 - http://css3pie.com/

Answer 14

就连 Yahoo 也不鼓励使用圆角（请参阅第一个项目符号点）！ 诚然，他们在那篇文章中只讨论了 1 像素圆角，但有趣的是，即使是一家拥有其专业知识的公司也得出结论，它们太痛苦了 让它们在大多数时间工作。

如果您的设计没有它们也能生存，那就是最简单的解决方案。

Answer 15

总是有 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 16

我个人最喜欢这个解决方案，它是一个.htc，允许 IE 渲染弯曲边框。

http://www.htmlremix.com/css/curved-corner -边框半径-跨浏览器

Answer 17

在 Safari、Chrome、Firefox 中 > 2、IE> 在 CSS 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。

IMO，CSS 方式更好，因为它很简单，并且会在不支持它的浏览器中优雅地降级。 当然，这只是客户端在不支持的浏览器（例如 IE <<）中不强制执行它们的情况。 9.

Answer 18

这是我最近做的一个 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;
}

图像只有 18 像素宽，并且所有 4 个角都挤在一起。 看起来像一个圆圈。

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

Answer 19

我通常只使用 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 20

我在创建 Stack Overflow 的早期就研究过这个问题，但找不到任何创建圆角的方法，不会让我感觉自己刚刚走过下水道。

CSS3 最终定义了

border-radius:

这正是您想要的让它工作。 虽然这在最新版本的 Safari 和 Firefox 中可以正常工作，但在 IE7（我不认为在 IE8 中）或 Opera 中根本不行。

与此同时，一切都在进行黑客攻击。 我很想听听其他人认为目前在 IE7、FF2/3、Safari3 和 Opera 9.5 上执行此操作的最简洁方法。

Answer 21

自从 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 圆角“Roundup”
3. CSS 的 25 种圆角技术