参加web前端校招的同学们经常会遇到这样的面试题：用HTML+CSS画出一个同心圆。
例如：
这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用。
1、html代码
<body>
<div id="circle_bot">
</div>
<div id="circle_mid">
</div>
<div id="circle_top">
</div>
</body>html部分代码很简单，只需要三个DIV标签即可，记得分别命名，这样在CSS中方便单独选中。
2、CSS代码：
<style type="text/css">
#circle_bot{
background-color:#E09;
width: 150px;
height: 150px;
margin: 0px 0 0 0px;
border-radius: 50%;
}
#circle_mid {
background-color:#EAA;
width: 100px;
height: 100px;
margin: -125px 0 0 25px;
border-radius: 50%;
}
#circle_top{
background-color:#ED9;
width: 50px;
height: 50px;
margin: -75px 0 0 50px;
border-radius: 50%;
}
</style>从底圆到顶圆依次设定宽高（事实上此时还是个正方形），按照位置设置偏移位置，margin的四个偏移值分别对应上、右、下、左的边距，负数则表示反方向。
border-radius是倒圆角，数值可以使用像素，为了简单起见设置50%则倒圆角的半径默认是该DIV宽度的50%。
873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
