用HTML+CSS画出一个同心圆

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

 

例如：

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

 

1、html代码

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  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] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  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%。

posted @ 2017-05-17 17:57  ysx_小鱼  阅读(3019)  评论(1)  编辑  收藏  举报