用HTML+CSS画出一个同心圆

时间：2023-03-08 16:13:05

参加web前端校招的同学们经常会遇到这样的面试题：用HTML+CSS画出一个同心圆。

例如：

用HTML+CSS画出一个同心圆

这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用。

1、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代码：

  1. <style type="text/css">
  2. #circle_bot{
  3. background-color:#E09;
  4. width: 150px;
  5. height: 150px;
  6. margin: 0px 0 0 0px;
  7. border-radius: 50%;
  8. }
  9. #circle_mid {
  10. background-color:#EAA;
  11. width: 100px;
  12. height: 100px;
  13. margin: -125px 0 0 25px;
  14. border-radius: 50%;
  15. }
  16. #circle_top{
  17. background-color:#ED9;
  18. width: 50px;
  19. height: 50px;
  20. margin: -75px 0 0 50px;
  21. border-radius: 50%;
  22. }
  23. </style>

分别用id选择器选中三个div，然后给予不同的背景色予以区分。

从底圆到顶圆依次设定宽高（事实上此时还是个正方形），按照位置设置偏移位置，margin的四个偏移值分别对应上、右、下、左的边距，负数则表示反方向。

border-radius是倒圆角，数值可以使用像素，为了简单起见设置50%则倒圆角的半径默认是该DIV宽度的50%。

相关文章