一、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：圆角半径 ）
二、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 (外部圆半径-内部圆半径）
html代码：
1 <h1>时钟</h1>2 <div id="exCircle">3 ????<div id="inCircle">4 ????</div>5 </div>
三、效果：
四、知识补充
1、border-radius：参考https://blog.csdn.net/liuyan19891230/article/details/50724630
2、position属性，relative/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><h1>时钟</h1><div id="exCircle"> ???<div id="inCircle"> ???</div></div></body><html>利用 html+css 画同心圆（concentric circles）——绝对布局
原文地址：https://www.cnblogs.com/luiyuying/p/LYY_Concentric_Circles.html