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

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

2023-11-11 301人已围观

简介 每个人都喜欢彩虹，都期待彩虹的出现，这篇文章主要为大家详细介绍了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.             

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网