您现在的位置是：网站首页> 编程资料编程资料

CSS制作梦幻彩虹效果_CSS教程_CSS_网页制作_

2021-09-13 857人已围观

简介 每个人都喜欢彩虹，都期待彩虹的出现，这篇文章主要为大家详细介绍了CSS制作梦幻彩虹的5种效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

今天看到一篇文章，说到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.     &#

    上一篇：CSS3中Transform动画属性用法详解 _css3_CSS_网页制作_

    下一篇：CSS制作各种样式的彩虹效果_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网