1.CSS画实心圆

　　长度和宽度相等，border-radius设置为长度（宽度）的一半。

#circle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 100px;
}

　　2.CSS画空心圆

　　和画实心圆方法类似，只是将border大小设置为小于长度（宽度）的一半。

#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 solid;
-webkit-border-radius: 100px;
}

　　3.CSS画虚线圆

#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 dashed;
-webkit-border-radius: 100px 100px 100px 100px;
}

　　4.CSS画（左）半圆

#quartercircle {
width: 100px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 200px 0 0 200px;
}

　　5.CSS画1/4圆

#quartercircle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 200px 0 0 0;
}