CSS3圆角边框的详细讲解border-radius

1、border-radius：10px；

注：所有角都是用半径为10px的圆角。

2、border-radius:30px  40px  50px  60px;

注：四个半径值分别表示：左上角  右上角  右下角  左下角   （顺时针）；

3、border-raduis：20px  60px  40px;

注：三个半径值分别表示：左上角  右上角和左下角   右小角。

4、border-radius:60px/40px;

注：这两个半径值分别代表是水平/垂直方向的半径

5、border-raduis的单位不只是PX，它还可以是百分比或者em，但兼容性不太好。

1、实心圆：

      .circle1 {

           width: 180px;

           height: 180px;

           background: #00C3FF;

           border-radius: 90px; /* 半径至少为宽度（高度）的一半 */

       }

2、半圆：

 .circle2{

           width: 180px;

           height: 90px;

           background: #00C3FF;

           border-radius: 90px 90px 0 0;

           /* 半径至少为宽度的一半 */

       }

注：当然你也可以设置不同方向的半圆，但是border-radius的半径值需要发生相应的变化。

3、胶囊

      .jiaonuan{

           width: 200px;

           height: 100px;

           background: #00C3FF;

           border-radius: 50px;

       }

4、圆环：

   .yuanhuan{

           width: 120px;

           height: 120px;

           border: 20px solid #00C3FF;

           border-radius: 120px;

       }