CSS制作各种样式的彩虹效果今天看到⼀篇⽂章，说到margin的塌陷的问题，并提供了好⼏个例⼦。
⾃⼰之前还没怎么遇到过这个问题，正好来研究⼀下。
CSS 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. }
效果：
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;box shadow怎么设置
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. }
以上所述是⼩编给⼤家介绍的CSS制作各种样式的彩虹效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论