CSS制作梦幻彩虹效果

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

XML/HTML Code复制内容到剪贴板

1. <div class="box1"></div>  
2. <div class="box2"></div>  
3. <div class="box3"></div>  
4. <div class="box4"></div>    

css样式一，使用margin塌陷：

CSS Code复制内容到剪贴板

1. .box1, .box2, .box3 {   
2. 　　width: 200px;   
3. 　　}   
4. .box1{   
5. 　　margin-bottom: -80px;   
6. 　　height:100px;   
7. 　　background: blue;   
8. 　　}   
9. .box2 {   
10. 　　margin-bottom:-40px;   
11. 　　height:60px;   
12. 　　background: #ffff00;   
13. }   
14. .box3{   
15. 　　height:20px;   
16. 　　background: #ff0000;   
17. }   

效果：  

 

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

CSS Code复制内容到剪贴板

1. .box1{   
2.             width: 400px;   
3.             height: 200px;   
4.             overflow: hidden;   
5.         }   
6.         .box1::before{   
7.             float: left;   
8.             display: block;   
9.             height: 400px;   
10.             width:400px;   
11.             border-radius: 100%;   
12.             border: solid 10px blue;   
13.             box-sizing: border-box;   
14.             content: "";   
15.         }   
16.         .box1::after{   
17.             margin-top: 10px;   
18.             margin-left: 10px;   
19.             display: block;   
20.             width: 380px;   
21.             height: 380px;   
22.             border: solid #ffff00 10px;   
23.             border-radius: 100%;   
24.             box-sizing: border-box;   
25.             content: "";   
26.         }   
27.         .box2{   
28.             float: left;   
29.             margin-top: -180px;   
30.             margin-left: 20px;   
31.             width: 360px;   
32.             height: 180px;   
33.             overflow: hidden;   
34.         }   
35.         .box2::before{   
36.             float: left;   
37.             display: block;   
38.             margin: 0;   
39.             width: 360px;   
40.             height: 360px;   
41.             border-radius: 100%;   
42.             border: solid 10px #ff0000;   
43.             box-sizing: border-box;   
44.             content: "";   
45.         }   
46.         .box2::after{   
47.             display: block;   
48.             margin-top: 10px;   
49.             margin-left: 10px;   
50.             width: 340px;   
51.             height: 340px;   
52.             border-radius: 100%;   
53.             border: solid 10px #ffff00;   
54.             box-sizing: border-box;   
55.             content: "";   
56.         }   
57.         .box3{   
58.             margin-top: -160px;   
59.             margin-left: 40px;   
60.             width: 340px;   
61.             height: 160px;   
62.             overflow: hidden;   
63.         }   
64.         .box3::before{   
65.             float: left;   
66.             display: block;   
67.             width: 320px;   
68.             height: 320px;   
69.             border: solid 10px blue;   
70.             border-radius: 100%;   
71.             box-sizing: border-box;   
72.             content: "";   
73.         }    
74.   

效果：

 

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

CSS Code复制内容到剪贴板

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

效果：
 

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

CSS Code复制内容到剪贴板

1. .box1{   
2.             position: absolute;   
3.             width: 200px;   
4.             height: 100px;   
5.             background: #008aff;   
6.         }   
7.         .box2{   
8.             position: absolute;   
9.             margin-top: 20px;   
10.             width: 200px;   
11.             height: 60px;   
12.             background: #ffff00;   
13.         }   
14.         .box3{   
15.             position: absolute;   
16.             margin-top: 40px;   
17.             width: 200px;   
18.             height: 20px;   
19.             background: #ff6633;   
20.         }   

效果： 

CSS样式五，使用radial-gradient：

CSS Code复制内容到剪贴板

1. .box4{   
2.            width: 260px;   
3.            height: 130px;   
4.            overflow: hidden;   
5.        }   
6.        .box5{   
7.            width: 260px;   
8.            height: 260px;   
9.            border-radius: 100%;   
10.            background: radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);   
11.            background: -moz-radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);   
12.            background: -webkit-radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);   
13.        }   

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。