css - 如何在 Google Chrome 中的 CSS 中做圆角

Question

基本上我想弄清楚我如何在 CSS 中的 DIV 上做圆角，这将在谷歌浏览器中呈现

Answer 1

Google Chrome（和 Safari）使用以下 CSS 3 前缀

-webkit-border-radius: 10px;

10px的所有角落

-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;

左上角和左下角 8px

对于 Firefox，您可以使用：

-moz-border-radius: 10px;

对于所有的角落和

-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;

对于左上角和左下角

Answer 2

涵盖 Chrome、FF 和任何支持 CSS 3 的浏览器：

{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}

Answer 3

像这样编写 CSS 代码对未来很有用：

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

这样，当 IE9/IE10 出现时，您的代码也将在那里工作：D

Answer 4

鉴于所有浏览器现在都支持无前缀的边界半径；请参阅：http ://caniuse.com/#search=border-radius今天使用的正确语法很简单：

border-radius: 5px;

Answer 5

是的，但唯一的问题是你实际上抛出了 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";

}