CSS border-radius画圆

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