java画同心圆_利用 html+css 画同心圆（concentric circles）——绝对布局与相对布局...

一、css 绘制圆

1

2 #circle{

3 width:300px;

4 height:300px;

5 background-color:#000000;

6 border-radius:300px;

7 }

key:

1、width = height 相当于画一个正方形

2、border-radius > 0.5*width                (border-radius：圆角半径 )

二、同心圆，两种画法

2.1 absolute构成同心圆

绘制外面的圆：

1 #exCircle{

2 margin:auto;

3 width:300px;

4 height:300px;

5 border-radius:300px;

6 background-color: green;

7 }

key:

1、margin: auto 使圆居中显示

2、外部圆的半径为150px(width/2)

绘制里面的圆

1 #inCircle{

2 margin-top:50px;

3 margin-left:50px;

4 position:absolute;

5 width:200px;

6 height:200px;

7 border-radius:150px;

8 background-color:yellow;

9 }

key:

1、内部圆半径为100px(width/2)

2、position:absolute 使用绝对布局

3、margin-top:50px (外部圆半径-内部圆半径)

2.2 relative构成同心圆

绘制外面的圆：

1 #exCircle{

2 margin:auto;

3 width:300px;

4 height:300px;

5 border-radius:150px;

6 background-color:green;

7 }

绘制内部的圆：

1 #inCircle{

2 top:50px;

3 left:50px;

4 position:relative;

5 width:200px;

6 height:200px;

7 border-radius:100px;

8 background-color:yellow;

9 }

key:

1、top/left 都是 width/2

三、效果：

四、知识补充

1、border-radius：参考https://blog.csdn.net/liuyan19891230/article/details/50724630

2、position属性，relative/absolute区分，网上信息比较乱，最近整理以后再发一篇

附：

完整源码(absolute)

concentric circles

#exCircle{margin:auto;width:300px;height:300px;border-radius:150px;background-color:green;

}#inCircle{margin-top:50px;margin-left:50px;position:absolute;width:200px;height:200px;border-radius:100px;background-color:yellow;

}