CSS制作各种样式的彩虹效果

今天看到一篇文章，说到margin的塌陷的问题，并提供了好几个例子。
 
自己之前还没怎么遇到过这个问题，正好来研究一下。

CSS Code复制内容到剪贴板

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

（编辑：ASP站长网）