如何在 Google Chrome 中的 CSS 中实现圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1508177/
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
How do I do rounded corners in CSS in Google Chrome
提问by dove
Basically I am trying to work out how I do rounded corners on a DIV in CSS that will render in google chrome
基本上我想弄清楚我如何在 CSS 中的 DIV 上做圆角，这将在谷歌浏览器中呈现
回答by Spasm
Google Chrome (and Safari) work with the following CSS 3 prefixes
Google Chrome（和 Safari）使用以下 CSS 3 前缀
-webkit-border-radius: 10px;
for all corners at 10px
对于 10px 的所有角落
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
for the top left corner and bottom left at 8px
对于左上角和左下角 8px
For Firefox you can use:
对于 Firefox，您可以使用：
-moz-border-radius: 10px;
for all the corners and
对于所有角落和
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
for the top left corner and bottom left
对于左上角和左下角
回答by dove
To cover both Chrome, FF and any browser that supports CSS 3:
涵盖 Chrome、FF 和任何支持 CSS 3 的浏览器：
{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
回答by Ahi Tuna
It's future-useful to code your css like this:
像这样编写 css 代码对未来很有用：
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
That way, when IE9/IE10 comes out your code will also work there as well :D
这样，当 IE9/IE10 出现时，您的代码也可以在那里工作 :D
回答by Ahi Tuna
Given that all browsers now support border-radius without prefixes; see: http://caniuse.com/#search=border-radiusthe correct syntax to use today is simply:
鉴于所有浏览器现在都支持无前缀的边界半径；请参阅：http: //caniuse.com/#search=border-radius今天使用的正确语法很简单：
border-radius: 5px;
回答by Steve
Yes but the only problem with this is that you are actually throwing css errors because of IE being Hymaned and Microshaft not wanting to do anything about it, the fix that i use is js based but I imagine most people know all about that. But, the reason I use it is because it always works for me and on all the major browsers. Here you go.
是的，但唯一的问题是您实际上是在抛出 css 错误，因为 IE 被劫持而 Microshaft 不想对此做任何事情，我使用的修复程序是基于 js 的，但我想大多数人都知道这一切。但是，我使用它的原因是因为它始终适用于我和所有主要浏览器。干得好。
var obj= document.getElementById('divName');
var browserName=navigator.appName;
var browserVer=parseInt(navigator.appVersion);
//alert(browserName);
if ((browserName=="Microsoft Internet Explorer")) {
obj.style.borderRadius = "15px";
}else {
obj.style.MozBorderRadius = "15px";
obj.style.WebkitBorderRadius= "15px";
}
