使用 CSS 创建圆角 [关闭]

Posted 2023-03-05

技术标签:

【中文标题】使用 CSS 创建圆角 [关闭]【英文标题】：Creating rounded corners using CSS [closed] 【发布时间】：2010-09-05 15:29:22 【问题描述】：

如何使用 CSS 创建圆角？

【问题讨论】：

这是一个关于如何仅使用 CSS 制作圆角的好视频：sampsonvideos.com/video.php?video=12> Article on rounded corners techniques 来自 Yahoo Developer 网络 - 从 2007 年开始。还有一种方法可以到达 add rounded corners (requiring images) to a YUI panel。 200+ 赞表示这是建设性的。我相信这是一个有价值的规范问题，值得重新讨论，特别是因为它现在是社区 wiki。除了它是在网络上很多很多其他地方都可以轻松找到的信息。 SO 无需复制现有资源。 【参考方案1】：

自从引入 CSS3 以来，使用 CSS 添加圆角的最佳方法是使用 border-radius 属性。你可以read the spec在属性上，或者得到一些useful implementation information on MDN：

如果您使用的浏览器支持doesn'timplementborder-radius（Chrome pre-v4、Firefox pre-v4、IE8、Opera pre-v10.5、Safari pre-v5），那么下面的链接详细一大堆不同的方法。找到一个适合您的网站和编码风格的，然后使用它。

CSS Design: Creating Custom Corners & Borders CSS Rounded Corners 'Roundup' 25 Rounded Corners Techniques with CSS

【讨论】：

我发现 DD_roundies 是完美的解决方案：dillerdesign.com/experiment/DD_roundies/#nogo @vsync 但在 IE8 中没有得到很好的支持 dillerdesign.com/experiment/DD_roundies/#supported_browsers 如果您决定使用 CSS3（如 SO）border-radius.com（另一个参考。css3.info/border-radius-apple-vs-mozilla）的有用链接第三个链接失效cssjuice.com/25-rounded-corners-techniques-with-css【参考方案2】：

我在创建 Stack Overflow 的早期就看到了这一点，但找不到任何方法来创建不会让我感觉自己只是穿过下水道的圆角。 p>

CSS3 does finally define

border-radius:

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

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

【讨论】：

“……穿过下水道？”这有点苛刻，杰夫。答案是“视情况而定”。单色、渐变或阴影框？它们需要垂直扩展、水平扩展还是两者兼而有之？针对不同需求的不同解决方案。要求越高，解决方案就越像下水道。我更喜欢使用这种方法。如果浏览器不支持它，谁在乎？ Twitter 将其网站上的圆角功能降级为尖角，以供 IE 用户使用。真的没什么大不了的。我肯定会使用这种方法 - 让我们按原样处理。如果有人不使用浏览器（即 IE），他们应该将圆角视为有角度的。 :) 我想否决这个答案，因为它没有描述回答者 (Jeff) 认为的最佳方式。【参考方案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 上运行良好。

【讨论】：

【参考方案4】：

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

【讨论】：

这对我来说完全有效，同时为其他浏览器定义了 -moz 等角。【参考方案5】：

我建议使用背景图片。其他方式则不太好：没有抗锯齿和无意义的标记。这里不是使用 javascript 的地方。

【讨论】：

javascript 绝对有最大的失败范围，并且在我的经验中闪烁。我尝试过的所有 jquery 插件都有一些意想不到的副作用 CurvyCorners (curvycorners.net) 和 ShadedBorder (ruzee.com/blog/shadedborder) do 设法支持抗锯齿。还有一些使用这些无额外标记的方法，您可以使用一个类来实现，然后将标记动态添加到分类元素中。也就是说，我使用它们的次数越多，你看起来就越正确……它们对原型设计很有用，但给 DOM 增加了很多额外的重量。现在我已经按照我想要的方式进行了调整，我打算将它们转换为图像。这个答案没有包含足够的细节来实现回答者的想法。【参考方案6】：

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

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

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

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

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

behavior HTC file

【讨论】：

从来不明白为什么这么多人关心 CSS 验证。没关系，只有 DOM 验证很重要。这看起来像是要走的路。你能简单解释一下什么是行为文件吗？我认为寻找这个问题答案的人可能不会熟悉这些。行为文件链接好像失效了【参考方案7】：

随着对 CSS3 的支持在较新版本的 Firefox、Safari 和 Chrome 中实现，查看“边框半径”也会有所帮助。

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

【讨论】：

-webkit-border-bottom-rightright-radius 的语法：3px;和 -webkit-border-top-right-radius: 10px;应该阅读 -webkit-border-bottom-right-radius: 3px 和 -webkit-border-top-right-radius: 10px;【参考方案8】：

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

【讨论】：

@mcaulay - 它还支持给盒子一个阴影吗？ jquery roundcorners 不支持 IE 8。【参考方案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;

如前所述，它有其局限性（圆角框后面的背景应该是纯色的，否则角与背景不匹配），但它适用于其他任何东西。

更新：使用精灵表改进了实现。

【讨论】：

这一切都可以使用 CSS 精灵来简化，也许我会更新我的答案。在那里，我更新了代码以使用精灵表。【参考方案10】：

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

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

【讨论】：

【参考方案11】：

在 Safari、Chrome、Firefox > 2、IE > 8 和 Konquerer（可能还有其他）中，您可以在 CSS 中使用 border-radius 属性来实现。由于它还不是规范的正式部分，请使用供应商特定的前缀...

示例

#round-my-corners-please 
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;

JavaScript 解决方案通常会添加一堆小的divs 以使其看起来圆润，或者它们使用边框和负边距来制作 1px 的凹角。有些人可能还会在 IE 中使用 SVG。

IMO，CSS 方式更好，因为它很简单，并且会在不支持它的浏览器中优雅地降级。当然，这只是客户端在不支持的浏览器（例如 IE

【讨论】：

【参考方案12】：

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

【讨论】：

【参考方案13】：

作为圆角工作的复杂程度的指示，即使是Yahoo discourages them（参见第一个项目符号点）！诚然，他们在那篇文章中只讨论了 1 个像素的圆角，但有趣的是，即使是一家具有他们专业知识的公司也得出结论，他们在大多数情况下都太痛苦了to get them working。

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

【讨论】：

我想找到您所说的 YUI 页面的一部分，但是我看过的所有要点都没有说尝试圆角是一个坏主意。你可以说得更详细点吗？我发现有一篇文章讨论了如何在使用圆角时以不同方式设置宽度，但我并不气馁。 @allyourcode - 我也看不到它了。我记得发过这篇文章，但不完全是他们所说的。但是看起来在上面的第二个链接中，他们提到了删除 IE 对 1px 圆角的支持。但无论如何，这篇文章有点讽刺，因为他们只谈论 1px 角，我认为这非常浪费时间！我确实记得在我写这篇文章的时候，我对圆角感到沮丧，并选择了角落图像【参考方案14】：

当然，如果它是固定宽度，那么使用 CSS 就超级简单，而且一点也不令人讨厌或费力。当你需要它在两个方向上扩展时，事情就会变得不稳定。一些解决方案有大量的 div 堆叠在一起以实现它。

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

【讨论】：

【参考方案15】：

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

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

【讨论】：

【参考方案16】：

如果您要使用边框半径解决方案，有这个很棒的网站可以生成 css，使其适用于 safari/chrome/FF。

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

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

【讨论】：

【参考方案17】：

除了上面提到的 htc 解决方案，这里还有另一个解决方案和示例，可以联系rounded corners in IE。

【讨论】：

【参考方案18】：

没有“最好”的方法；有些方法对您有用，也有些方法无效。话虽如此，我在这里发表了一篇关于创建基于 CSS+Image 的流畅圆角技术的文章：

Box with Round Corners Using CSS and Images - Part 2

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

【讨论】：

【参考方案19】：

不久前我写了一篇关于此的博客文章，所以要了解更多信息，see here

<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 被广泛支持边框半径，这将是制作圆角的官方最佳方式。

【讨论】：

【参考方案20】：

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

【讨论】：

【参考方案21】：

Opera 还不支持边界半径（显然它将在版本 10 之后的版本中）。同时，您可以use CSS to set an SVG background to create a similar effect。

【讨论】：

以上是关于使用 CSS 创建圆角 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章

css3基础CSS3 边框

如何创建带有圆角背景的 EditText [关闭]

Mailchimp 模板中的圆角 - 基于 CSS 或图像

CSS CSS3的圆角和用CSS3创建圆

CSS3的边框圆角背景

使用 CSS 剪辑路径时如何圆角