一、css 繪製圓 key: 1、width = height 相當於畫一個正方形 2、border-radius > 0.5*width （border-radius：圓角半徑 ） 二、同心圓，兩種畫法 2.1 absolute構成同心圓 繪製外面的圓： key: 1、margin: auto 使 ...
一、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>
