<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="rainbow"> #先用一个大框把要画的彩虹框起来
<div> #每一层颜色都是一个div，写div>div>div>div>div>div>div>div再按Tab就可以一次性写出八个div，为啥多了一个div，详见第十一步。
<div>
<div>
<div>
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
/*第一步：先把所有的盒模型设为border box*/
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
/*第十二步：把body背景变成白色更好看*/
/*border: 1px solid red;先用边框看看body在哪，之后再删掉*/
background: white;
/*把body变成白色，外面的也变成白色，这叫自动填充背景色*/
}
.rainbow {
/*第十步：把框住彩虹的大框变成半圆形，即让溢出的的下半圆消失*/
/*border: 1px solid black;*先写个边框方便观看，之后再删掉/
height: 200px;
/*高度应为第一个颜色的一半，即200px*/
overflow: hidden;
}
.rainbow div{
/*第九步：raindow大框里面所有的div从正方形变成圆形，并且要消除父子合并现象*/
border-radius: 50%;
overflow: hidden
}
.rainbow > div {
/*第二步，先从raindow里面的div，即第一个div开始，也就是彩虹第一个颜色红色*/
width: 400px;
height: 400px;
background: hsl(0, 80%, 45%);
}
.rainbow > div> div {
/*第三步：raindow里面的div里面的div，即第二个div，也就是彩虹的第二个颜色*/
background: hsl(60, 80%, 50%);
height: 380px;
margin: 10px;
}
.rainbow > div> div> div {
/*第四步：第三个div，也就是彩虹的第三个颜色*/
background: hsl(120, 80%, 50%);
height: 360px;
margin: 10px;
}
.rainbow > div> div>div>div {
/*第五步：第四个div，也就是彩虹的第四个颜色*/
background: hsl(180, 80%, 50%);
height: 340px;
margin: 10px;
}
.rainbow > div> div>div>div>div {
/*第六步：第五个div，也就是彩虹的第五个颜色*/
background: hsl(240, 80%, 50%);
height: 320px;
margin: 10px;
}
.rainbow > div> div>div>div>div >div {
/*第七步：第六个div，也就是彩虹的第六个颜色*/
background: hsl(300, 80%, 50%);
height: 300px;
margin: 10px;
}
.rainbow > div> div>div>div>div >div>div {
/*第八步：第七个div，也就是彩虹的第七个颜色*/
background: hsl(330, 80%, 50%);
height: 280px;
margin: 10px;
}
.rainbow > div> div>div>div>div >div>div>div {
/*第十一步：第八个div和上面的差不多，但是要变成白色，这样才能让上一个div，也就是第七个颜色下面变白*/
background: hsl(330, 80%, 100%);
height: 260px;
margin: 10px;
}
最后的效果图
