圆环的实现

方法一：利用子元素绝对定位的方法

<div id="circle">

<div id="ncircle"></div>

</div>

#circle{

width:100px;

height:100px;

background:green;

border-radius:50%;

}

#ncircle{

width:50px;

height:50px;

background:yellow;

border-radius:50%;

position:relative;

top:25px;

left:25px;

}

方法二：利用伪元素（其余与上面方法基本相同）

<div id="circle"></div>

#circle{

width:100px;

height:100px;

background:green;

border-radius:50%;

}

#circle:after{

content:"";

display:block;

width:50px;

height:50px;

background:yellow;

border-radius:50%;

position:relative;

top:25px;

left:25px;

}

方法三：使用border

<div id="circle"></div>

#circle{

box-sizing:border-box;

width:100px;

height:100px;

border:25px yellow solid;

background:green;

border-radius:50%;

}