利用 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)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>concentric circles</title>
    <style type="text/css">

#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;
}

</style>
</head>
<body>

<div id="exCircle">
    <div id="inCircle">
    </div>
</div>

</body>
<html>

 

posted on 2018-04-04 19:04  洛小侠  阅读(7987)  评论(0)  编辑  收藏  举报

导航