Make a rainbow effect with CSS and a rainbow with css

Make a rainbow effect with CSS and a rainbow with css

Today I saw an article about the collapse of margin and provided several examples.

I have never encountered this problem before. I just want to study it.

<div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div>

Css style 1, Collapsed using margin:

.box1, .box2, .box3 {　　width: 200px;　　}.box1{　　margin-bottom: -80px;　　height:100px;　　background: blue;　　}.box2 {　　margin-bottom:-40px;　　height:60px;　　background: #ffff00;}.box3{　　height:20px;　　background: #ff0000;}

Effect:

 

Css style 2It also uses the margin collapse, but the arc rainbow is made:

.box1{            width: 400px;            height: 200px;            overflow: hidden;        }        .box1::before{            float: left;            display: block;            height: 400px;            width:400px;            border-radius: 100%;            border: solid 10px blue;            box-sizing: border-box;            content: "";        }        .box1::after{            margin-top: 10px;            margin-left: 10px;            display: block;            width: 380px;            height: 380px;            border: solid #ffff00 10px;            border-radius: 100%;            box-sizing: border-box;            content: "";        }        .box2{            float: left;            margin-top: -180px;            margin-left: 20px;            width: 360px;            height: 180px;            overflow: hidden;        }        .box2::before{            float: left;            display: block;            margin: 0;            width: 360px;            height: 360px;            border-radius: 100%;            border: solid 10px #ff0000;            box-sizing: border-box;            content: "";        }        .box2::after{            display: block;            margin-top: 10px;            margin-left: 10px;            width: 340px;            height: 340px;            border-radius: 100%;            border: solid 10px #ffff00;            box-sizing: border-box;            content: "";        }        .box3{            margin-top: -160px;            margin-left: 40px;            width: 340px;            height: 160px;            overflow: hidden;        }        .box3::before{            float: left;            display: block;            width: 320px;            height: 320px;            border: solid 10px blue;            border-radius: 100%;            box-sizing: border-box;            content: "";        }

Effect:

Css style 3, Using box-shadow:

.box4{            width: 200px;            height: 200px;            box-shadow: 0 10px 0 red,0 20px 0 yellow, 0 30px 0 green,0 40px 0 blue,0 50px 0 purple;        }

Effect:

CSS style 4, Using position: absolute for implementation, I feel this is the most common

.box1{            position: absolute;            width: 200px;            height: 100px;            background: #008aff;        }        .box2{            position: absolute;            margin-top: 20px;            width: 200px;            height: 60px;            background: #ffff00;        }        .box3{            position: absolute;            margin-top: 40px;            width: 200px;            height: 20px;            background: #ff6633;        }

Effect:

CSS style 5: Use radial-gradient:

 .box4{            width: 260px;            height: 130px;            overflow: hidden;        }        .box5{            width: 260px;            height: 260px;            border-radius: 100%;            background: radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);            background: -moz-radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);            background: -webkit-radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);        }

Link to the article about css negative margin: https://segmentfault.com/a/1190000005856540