方法一:利用子元素绝对定位的方法
<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%;
}