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

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

2023-11-11 274人已围观

简介 这篇文章主要介绍了CSS制作各种样式的彩虹效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

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

CSS Code复制内容到剪贴板
  1. "box1">
  
  • "box2">
    •   
  • "box3">
    •   
  • "box4">
    •    

    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

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

      下一篇：css布局之负margin妙用及其他实现_CSS布局实例_CSS_网页制作_

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网