HTML+CSS画同心圆

来源：互联网发布：淘宝足球鞋正品店铺编辑：程序博客网时间：2024/06/06 11:40

参加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>

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

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

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

0 0