rainbow.css

/*
  .rainbow > div rainbow里面的第一个div
  .rainbow div rainbow里面的所有的div
  去掉border后回外边距合并
  color: hsl(180, 50%, 50%); 色相, 饱和度, 亮度
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* border: 1px solid yellowgreen; */
  background-color: #fff;
}

.rainbow { /* 类名为rainbow的div */
  height: 200px;
  overflow: hidden;
}

.rainbow div {
  overflow: hidden;
}

.rainbow > div { /* rainbow 后面第一个div */
  /* border: 1px solid #ff0000; */
  background-color: #ff0000;
  width: 400px;
  height: 400px;
  border-radius: 50%;
}

.rainbow > div > div {
  /* border: 1px solid #ffa500; */
  background-color: #ffa500;
  height: 380px;
  margin: 10px;
  border-radius: 50%;
}

.rainbow > div > div > div {
  /* border: 1px solid #ffff00; */
  background-color: #ffff00;
  height: 360px;
  margin: 10px;
  border-radius: 50%;
}

.rainbow > div > div > div > div {
  /* border: 1px solid #008000; */
  background-color: #008000;
  height: 340px;
  margin: 10px;
  border-radius: 50%;
}

.rainbow > div > div > div > div > div {
  /* border: 1px solid #0000ff; */
  background-color: #0000ff;
  height: 320px;
  margin: 10px;
  border-radius: 50%;
}

.rainbow > div > div > div > div > div > div {
  /* border: 1px solid #4b0082; */
  background-color: #4b0082;
  height: 300px;
  margin: 10px;
  border-radius: 50%;
}

.rainbow > div > div > div > div > div > div > div {
  /* border: 1px solid #ee82ee; */
  background-color: #ee82ee;
  height: 280px;
  margin: 10px;
  border-radius: 50%;
}

.rainbow > div > div > div > div > div > div > div > div {
  background-color: #fff;
  height: 260px;
  margin: 10px;
  border-radius: 50%;
}