如何使用 HTML + CSS画同心圆 ?
方案一：使用border-radius绘制圆形，通过定位或margin的方法设置位置。（有多少个圆就需要多少个div）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.circle:nth-child(1){
width:50px;
height:50px;
border-radius: 50%;
border: 1px solid red;
position: absolute;
top:75px;
left:75px;
}
.circle:nth-child(2){
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid green;
position: absolute;
top:50px;
left:50px;
}
.circle:nth-child(3){
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid yellow;
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</body>
</html>
方案二：添加伪元素（局限：一个div只能添加两个同心圆）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 110px 110px;
border: 1px solid red;
}
.circle::before {
content: '';
width: 120px;
height: 120px;
border-radius: 50%;
position: absolute;
top: 100px;
left: 100px;
border: 1px solid green;
}
.circle::after {
content: '';
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
top: 120px;
left: 120px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
方案三：使用box-shadow（只需要一个div就可以画很多圆）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
margin:100px;
box-shadow: 0 0 0 5px red,0 0 0 10px green,0 0 0 20px yellow;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
方案四：使用Css3背景渐变（Gradients），同样只需要一个div
- 径向渐变
background: radial-gradient(circle,red,green,blue,yellow,black); - 重复径向渐变
background: repeating-radial-gradient(red, yellow 10%, green 15%);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
margin:100px;
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
网友评论