一、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>
原文地址：https://www.cnblogs.com/luiyuying/p/LYY_Concentric_Circles.html
时间： 2024-08-03 23:06:35