用HTML+CSS画出一个同心圆
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
⽤HTML+CSS画出⼀个同⼼圆参加web前端校招的同学们经常会遇到这样的⾯试题：⽤HTML+CSS画出⼀个同⼼圆。
例如：
这道题主要考验的是基础盒模型布局能⼒和倒圆⾓属性的巧⽤。
1、html代码
[html]
1. <body>
2. <div id="circle_bot">
3. </div>
4. <div id="circle_mid">
5. </div>
6. <div id="circle_top">
7. </div>
8. </body>
html部分代码很简单，只需要三个DIV标签即可，记得分别命名，这样在CSS中⽅便单独选中。
2、CSS代码：
[html]
1. <style type="text/css">
2.
3. #circle_bot{
4. background-color:#E09;
5. width: 150px;
6. height: 150px;
7. margin: 0px 0 0 0px;
8. border-radius: 50%;
9. }
10. #circle_mid {
11. background-color:#EAA;
12. width: 100px;
13. height: 100px;
14. margin: -125px 0 0 25px;
15. border-radius: 50%;
16. }
17. #circle_top{
18. background-color:#ED9;
19. width: 50px;
20. height: 50px;
21. margin: -75px 0 0 50px;
22. border-radius: 50%;
23. }
24. </style>
分别⽤id选择器选中三个div，然后给予不同的背景⾊予以区分。
从底圆到顶圆依次设定宽⾼（事实上此时还是个正⽅形），按照位置设置偏移位置，margin的四个偏移值分别对应上、右、下、左的边距，负数则表⽰反⽅向。
border-radius是倒圆⾓，数值可以使⽤像素，为了简单起见设置50%则倒圆⾓的半径默认是该DIV宽度的50%。