利用 html+css 画同心圆（concentric circles）——绝对布局与相对布局
生活随笔
收集整理的這篇文章主要介紹了
利用 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>
總結
以上是生活随笔為你收集整理的利用 html+css 画同心圆（concentric circles）——绝对布局与相对布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PIC32单片机harmony开发环境
- 下一篇： profit