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

Question

基本上我想弄清楚我如何在CSS中使用谷歌浏览器渲染的DIV圆角

Answer 1

Google Chrome (and Safari) work with the following CSS 3 prefixes

-webkit-border-radius: 10px;

for all corners at 10px

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

for the top left corner and bottom left at 8px

For Firefox you can use:

-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

Answer 2

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

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

Answer 3

It's future-useful to code your css like this:

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

Answer 4

Given that all browsers now support border-radius without prefixes; see: http://caniuse.com/#search=border-radius the correct syntax to use today is simply:

border-radius: 5px;

Answer 5

Yes but the only problem with this is that you are actually throwing css errors because of IE being jacked 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.

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

}