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

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

2021-09-13 1235人已围观

简介 这篇文章主要介绍了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;   
    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.             提示： 本文由神整理自网络，如有侵权请联系本站删除！
      本站声明：
      1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
      2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

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

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

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网