今天看到一篇文章，说到margin的塌陷的问题，并提供了好几个例子。
自己之前还没怎么遇到过这个问题，正好来研究一下。
XML/HTML Code复制内容到剪贴板
<divclass="box1"></div><divclass="box2"></div><divclass="box3"></div><divclass="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:solid10pxblue;box-sizing:border-box;content:"";}.box1::after{margin-top:10px;margin-left:10px;display:block;width:380px;height:380px;border:solid#ffff0010px;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:solid10px#ff0000;box-sizing:border-box;content:"";}.box2::after{display:block;margin-top:10px;margin-left:10px;width:340px;height:340px;border-radius:100%;border:solid10px#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:solid10pxblue;border-radius:100%;box-sizing:border-box;content:"";}
效果：
css样式三，使用的是box-shadow：
CSS Code复制内容到剪贴板
.box4{width:200px;height:200px;box-shadow:010px0red,020px0yellow,030px0green,040px0blue,050px0purple;}效果：
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(#ffffff70px,#ff663380px,#ffff0090px,green100px,#008aff110px,purple120px);background:-moz-radial-gradient(#ffffff70px,#ff663380px,#ffff0090px,green100px,#008aff110px,purple120px);background:-webkit-radial-gradient(#ffffff70px,#ff663380px,#ffff0090px,green100px,#008aff110px,purple120px);}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
