彩虹效果CSS代码分享,CSS制作各种样式的彩虹效果

彩虹效果CSS代码分享,CSS制作各种样式的彩虹效果，也是使用的margin塌陷，不过做出来的是弧形的彩虹，css样式三，使用的是box-shadow，使用position:absolute来实现，感觉这种是最常见的了,使用radial-gradient.

今天看到一篇文章，说到margin的塌陷的问题，并提供了好几个例子。

自己之前还没怎么遇到过这个问题，正好来研究一下。

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

css样式一，使用margin塌陷：

CSS Code复制内容到剪贴板

.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;
}

效果：

css样式一，使用margin塌陷：

css样式二，也是使用的margin塌陷，不过做出来的是弧形的彩虹：

CSS Code复制内容到剪贴板

.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: "";
}

效果：

css样式二，也是使用的margin塌陷，不过做出来的是弧形的彩虹：

css样式三，使用的是box-shadow：

CSS Code复制内容到剪贴板

.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;
}

效果：

css样式三，使用的是boxshadow：

CSS样式四，使用position:absolute来实现，感觉这种是最常见的了

CSS Code复制内容到剪贴板

.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;
}

效果：

CSS样式五，使用radial-gradient：

CSS Code复制内容到剪贴板

.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);
}