CSS3 border-radius属性

border-radius属性：该属性能够实现圆角边框的效果，可以用来画圆、半圆或者椭圆。可以使用px、em等单位，或者使用百分比，后面可以有4个参数，可以用来设置4个边框的radius值。

border-radius:50px;

以上代码是border-radius的缩写形式，它等价于：

border-top-left-radius:50px;//左上角
border-top-right-radius:50px;//右上角
border-bottom-left-radius:50px;//左下角
border-bottom-right-radius:50px;//右下角

border-top-left-radius:50px表示左上角的弧度为半径为50px的圆。

浏览器支持：

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。
其中，-webkit-border-radius：支持webkit内核的浏览器，如苹果；chrome等浏览器。

-webkit-border-radius:50%;

等价于

-webkit-border-top-left-radius: 50%;//左上角
-webkit-border-top-right-radius:50%; //右上角
-webkit-border-bottom-right-radius:50%; //右下角
-webkit-border-bottom-left-radius: 50%;// 左下角

-moz-border-radius：主要支持firefox火狐浏览器。

-moz-border-radius:50%;

等价于：

-moz-border-radius-topleft: 50%;//左上角
-moz-border-radius-topright: 50%;//右上角
-moz-border-radius-bottomright:50%; //右下角
-moz-border-radius-bottomleft: 50%;//左下角

下面，我们用几个例子来看看border-radius的魅力吧！
1、圆

.box1{
    width:100px;
    height:100px;
    border:20px solid #333;
    border-left-color:red;
    border-right-color:blark;
    border-bottom-color:blue;
    border-top-color:green;
    border-radius:50%
}

<div class="box1"></div>

效果展示：

2、左上右下圆角

.box1{
    width:300px;
    height:100px;
    border-top-left-radius:50px;
    border-bottom-right-radius:50px;
    border:3px solid #333;
}

效果图：

3、切割圆形头像

img{
    width:200px;
    height:200px;
    border-radius:50%;
}

效果图：

border-radius的兼容性问题：
我们实现画一个圆只需要设置border-radius:50%;
但是Android 2.3 自带浏览器不支持 %，这时，我们需要将border-radius设置成一个比较大的值。

.box1{
    width:200px;
    height:200px;
    border-radius:9999px;
}

Android 4.2.x 不支持border-radius缩写：
这时我们需要将border-radius拆开来写。

.box1{
    width:200px;
    height:200px;
    border-top-left-radius:9999px;
    border-top-right-radius:9999px;
    border-bottom-left-radius:9999px;
    border-bottom-right-radius:9999px;
}