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

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

border-radius: 5px;

Answer 5

是的，但唯一的问题是，你实际上是因为IE被顶起而且微管不想对它做任何事情而引发css错误，我使用的修复是基于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";

}

如何在Google Chrome中使用CSS进行圆角处理

5 个答案: