您的位置：首页 > Web前端 > > 正文

css的水滴效果（CSS制作各种样式的彩虹效果）

更多 时间：2022-01-15 01:44:49 类别：Web前端 浏览量：576

css的水滴效果

CSS制作各种样式的彩虹效果

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

  • CSS Code复制内容到剪贴板
    1. <li class="box1"></li>   
    2. <li class="box2"></li>   
    3. <li class="box3"></li>   
    4. <li class="box4"></li>   

    • 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的水滴效果（CSS制作各种样式的彩虹效果）

    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的水滴效果（CSS制作各种样式的彩虹效果）

    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;   
    5.         }   

    • 效果：

    css的水滴效果（CSS制作各种样式的彩虹效果）

    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的水滴效果（CSS制作各种样式的彩虹效果）

    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的水滴效果（CSS制作各种样式的彩虹效果）

    以上所述是小编给大家介绍的CSS制作各种样式的彩虹效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持！

    标签：彩虹 css
  • 上一篇：python云服务技术（Python脚本修改阿里云的访问控制列表的方法）
  • 下一篇：mysql 删除数据回收空间（浅谈为什么MySQL不建议delete删除数据）
    • 您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利