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;
border: 3px #a72525 solid;
-webkit-border-radius: 100px;
}
3.CSS画虚线圆
#circle {
width: 200px;
height: 200px;
background-color: #efefef;
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;
}
最新文章
热门文章
猜你喜欢
