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