border-radius

1.用border-radius画圆 

    语法： border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?

    相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 

实心圆 

画实心圆的方法是高度和宽度相等，并且把border的宽度设为高度和宽度的一半。代码如下。 

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

空心圆

画空心圆和画实心圆的方法差不多，只是border的宽度只能小于高度和宽度的一半。代码如下。 

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

虚线圆

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