用python3编写彩虹的代码_[面试题目]如何用三个Div实现彩虹效果？

大家就不考虑一下“彩虹”是弯的么？

.box1 {

width: 400px;

height: 200px;

overflow: hidden;

}

.box1::before {

float: left;

display: block;

width: 400px;

height: 400px;

border-radius: 100%;

box-sizing: border-box;

border: solid 10px blue;

content: " ";

}

.box1::after {

margin-top: 10px;

margin-left: 10px;

display: block;

width: 380px;

height: 380px;

border-radius: 100%;

box-sizing: border-box;

border: solid 10px yellow;

content: " ";

}

.box2 {

float: left;

margin-top: -180px;

margin-left: 20px;

width: 360px;

height: 180px;

overflow: hidden;

}

.box2::before {

float: left;

margin: 0;

display: block;

width: 360px;

height: 360px;

border-radius: 100%;

box-sizing: border-box;

border: solid 10px red;

content: " ";

}

.box2::after {

margin-top: 10px;

margin-left: 10px;

display: block;

width: 340px;

height: 340px;

border-radius: 100%;

box-sizing: border-box;

border: solid 10px yellow;

content: " ";

}

.box3 {

float: left;

margin-top: -160px;

margin-left: 40px;

width: 320px;

height: 160px;

overflow: hidden;

}

.box3::before {

float: left;

margin: 0;

display: block;

width: 320px;

height: 320px;

border-radius: 100%;

box-sizing: border-box;

border: solid 10px blue;

content: " ";

}

BTW： 因为问题里说到用margin做效果，我个人更喜欢用position..