使用 CSS 创建圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating rounded corners using CSS
提问by Eldila
How can I create rounded corners using CSS?
如何使用 CSS 创建圆角？
采纳答案by Yaakov Ellis
Since CSS3 was introduced, the best way to add rounded corners using CSS is by using the border-radiusproperty. You can read the specon the property, or get some useful implementation information on MDN:
自从引入 CSS3 以来，使用 CSS 添加圆角的最佳方法是使用border-radius属性。您可以阅读该属性的规范，或在 MDN 上获取一些有用的实现信息：
If you are using a browser that doesn'timplementborder-radius(Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), then the links below detail a whole bunch of different approaches. Find one that suits your site and coding style, and go with it.
如果您使用的浏览器没有实现border-radius（Chrome pre-v4、Firefox pre-v4、IE8、Opera pre-v10.5、Safari pre-v5），那么下面的链接详细介绍了一大堆不同的方法。找到一个适合您的网站和编码风格的方法，然后使用它。
回答by Jeff Atwood
I looked at this early on in the creation of Stack Overflow and couldn't find anymethod of creating rounded corners that didn't leave me feeling like I just walked through a sewer.
我在创建 Stack Overflow 的早期就看过这个，但找不到任何创建圆角的方法，不会让我觉得我只是穿过下水道。
border-radius:
Which is exactly how you'd want it to work. Although this works OK in the latest versions of Safari and Firefox, but not at all in IE7 (and I don't think in IE8) or Opera.
这正是您希望它工作的方式。虽然这在最新版本的 Safari 和 Firefox 中可以正常工作，但在 IE7（我不认为在 IE8 中）或 Opera 中则完全无效。
In the meantime, it's hacks all the way down. I'm interested in hearing what other people think is the cleanest way to do this across IE7, FF2/3, Safari3, and Opera 9.5 at the moment..
与此同时，它一直在黑客攻击。我很想听听其他人认为目前在 IE7、FF2/3、Safari3 和 Opera 9.5 上执行此操作的最简洁方法。
回答by Sinan
I generally get rounded corners just with css, if browser does not support they see the content with flat corners. If rounded corners are not so critical for your site you can use these lines below.
我通常只用 css 得到圆角，如果浏览器不支持他们看到带有平角的内容。如果圆角对您的网站不是那么重要，您可以使用下面的这些行。
If you want to use all corners with same radius this is the easy way:
如果您想使用具有相同半径的所有角，这是一种简单的方法：
.my_rounded_corners{
-webkit-border-radius: 5px;
border-radius: 5px;
}
but if you want to control every corner this is good:
但如果你想控制每个角落，这很好：
.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;
}
As you see in each set you have browser specific styles and on the fourth rows we declare in standard way by this we assume if in future the others (hopefully IE too) decide to implement the feature to have our style be ready for them too.
正如你在每个集合中看到的，你有浏览器特定的样式，在第四行我们以标准方式声明，我们假设将来其他人（希望 IE 也是如此）决定实现该功能，让我们的样式也为它们做好准备。
As told in other answers, this works beautifully on Firefox, Safari, Camino, Chrome.
正如其他答案中所说，这在 Firefox、Safari、Camino、Chrome 上运行良好。
回答by Sniffer
If you're interested in creating corners in IE then this may be of use - http://css3pie.com/
如果您有兴趣在 IE 中创建角落，那么这可能有用 - http://css3pie.com/
回答by Lance Fisher
I would recommend using background images. The other ways aren't nearly as good: No anti-aliasing and senseless markup. This is not the place to use JavaScript.
我建议使用背景图片。其他方式几乎没有那么好：没有抗锯齿和无意义的标记。这不是使用 JavaScript 的地方。
回答by juanpablob
As Brajeshwar said: Using the border-radiuscss3 selector. By now, you can apply -moz-border-radiusand -webkit-border-radiusfor Mozilla and Webkit based browsers, respectively.
正如 Brajeshwar 所说：使用border-radiuscss3 选择器。现在，您可以分别申请-moz-border-radius和-webkit-border-radius用于基于 Mozilla 和 Webkit 的浏览器。
So, what happens with Internet Explorer?. Microsoft has many behaviors to make Internet Explorer have some extra features and get more skills.
那么，Internet Explorer 会发生什么？微软有很多行为让 Internet Explorer 具有一些额外的功能并获得更多的技能。
Here: a .htcbehavior file to get round-cornersfrom border-radiusvalue in your CSS. For example.
此处：从CSS 中的值.htc获取的行为文件。例如。round-cornersborder-radius
div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}
Of course, behavior selector does not a valid selector, but you can put it on a different css file with conditional comments (only for IE).
当然，行为选择器不是有效的选择器，但您可以将其放在带有条件注释的不同 css 文件中（仅适用于 IE）。
回答by Brajeshwar
With support for CSS3 being implemented in newer versions of Firefox, Safari and Chrome, it will also be helpful to look at "Border Radius".
由于在较新版本的 Firefox、Safari 和 Chrome 中实现了对 CSS3 的支持，查看“Border Radius”也会有所帮助。
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Like any other CSS shorthand, the above can also be written in expanded format, and thus achieve different Border Radius for the topleft, topright, etc.
与任何其他 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;
回答by mcaulay
jQuery is the way i'd deal with this personally. css support is minimal, images are too fiddly, to be able to select the elements you want to have round corners in jQuery makes perfect sense to me even though some will no doubt argue otherwise. Theres a plugin I recently used for a project at work here: http://plugins.jquery.com/project/jquery-roundcorners-canvas
jQuery 是我个人处理这个问题的方式。css 支持很少，图像太繁琐，能够在 jQuery 中选择你想要圆角的元素对我来说非常有意义，即使有些人无疑会反驳。我最近在这里工作的一个项目中使用了一个插件：http: //plugins.jquery.com/project/jquery-roundcorners-canvas
回答by mbillard
There's always the JavaScript way (see other answers) but since it's is purely styling, I'm kind of against use client scripts to achieve this.
总是有 JavaScript 方式（参见其他答案），但由于它纯粹是样式，我有点反对使用客户端脚本来实现这一点。
The way I prefer (though it has its limits), is to use 4 rounded corner images that you will position in the 4 corners of your box using CSS:
我更喜欢的方式（尽管它有其局限性）是使用 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;
}
As mentioned, it has its limits (the background behind the rounded box should be plain otherwise the corners won't match the background), but it works very well for anything else.
如前所述，它有其局限性（圆角框后面的背景应该是纯色的，否则角与背景不匹配），但它适用于其他任何东西。
Updated:Improved the implentation by using a sprite sheet.
更新：通过使用精灵表改进了实现。
回答by alex
In Safari, Chrome, Firefox > 2, IE > 8 and Konquerer (and probably others) you can do it in CSS by using the border-radiusproperty. As it's not officially part of the spec yet, please use a vendor specific prefix...
在 Safari、Chrome、Firefox > 2、IE > 8 和 Konquerer（可能还有其他）中，您可以通过使用border-radius属性在 CSS 中完成。由于它尚未正式成为规范的一部分，请使用供应商特定的前缀...
Example
例子
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
The JavaScript solutions generally add a heap of small divs to make it look rounded, or they use borders and negative margins to make 1px notched corners. Some may also utilise SVG in IE.
JavaScript 解决方案通常添加一堆小divs 以使其看起来更圆，或者他们使用边框和负边距来制作 1px 缺口角。有些人还可能在 IE 中使用 SVG。
IMO, the CSS way is better, as it is easy, and will degrade gracefully in browsers that don't support it. This is, of course, only the case where the client doesn't enforce them in non supported browsers such as IE < 9.
IMO，CSS 方式更好，因为它很简单，并且会在不支持它的浏览器中优雅地降级。当然，这只是客户端在不支持的浏览器（例如 IE < 9）中不强制执行它们的情况。
