您的位置:首页 > 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.   width200px;   
    3.   }   
    4. .box1{   
    5.   margin-bottom: -80px;   
    6.   height:100px;   
    7.   backgroundblue;   
    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.             width400px;   
    3.             height200px;   
    4.             overflowhidden;   
    5.         }   
    6.         .box1::before{   
    7.             floatleft;   
    8.             displayblock;   
    9.             height400px;   
    10.             width:400px;   
    11.             border-radius: 100%;   
    12.             bordersolid 10px blue;   
    13.             box-sizing: border-box;   
    14.             content"";   
    15.         }   
    16.         .box1::after{   
    17.             margin-top10px;   
    18.             margin-left10px;   
    19.             displayblock;   
    20.             width380px;   
    21.             height380px;   
    22.             bordersolid #ffff00 10px;   
    23.             border-radius: 100%;   
    24.             box-sizing: border-box;   
    25.             content"";   
    26.         }   
    27.         .box2{   
    28.             floatleft;   
    29.             margin-top: -180px;   
    30.             margin-left20px;   
    31.             width360px;   
    32.             height180px;   
    33.             overflowhidden;   
    34.         }   
    35.         .box2::before{   
    36.             floatleft;   
    37.             displayblock;   
    38.             margin: 0;   
    39.             width360px;   
    40.             height360px;   
    41.             border-radius: 100%;   
    42.             bordersolid 10px #ff0000;   
    43.             box-sizing: border-box;   
    44.             content"";   
    45.         }   
    46.         .box2::after{   
    47.             displayblock;   
    48.             margin-top10px;   
    49.             margin-left10px;   
    50.             width340px;   
    51.             height340px;   
    52.             border-radius: 100%;   
    53.             bordersolid 10px #ffff00;   
    54.             box-sizing: border-box;   
    55.             content"";   
    56.         }   
    57.         .box3{   
    58.             margin-top: -160px;   
    59.             margin-left40px;   
    60.             width340px;   
    61.             height160px;   
    62.             overflowhidden;   
    63.         }   
    64.         .box3::before{   
    65.             floatleft;   
    66.             displayblock;   
    67.             width320px;   
    68.             height320px;   
    69.             bordersolid 10px blue;   
    70.             border-radius: 100%;   
    71.             box-sizing: border-box;   
    72.             content"";   
    73.         }   
  • 效果:

    css的水滴效果(CSS制作各种样式的彩虹效果)

    css样式三,使用的是box-shadow:

  • CSS Code复制内容到剪贴板
    1. .box4{   
    2.             width200px;   
    3.             height200px;   
    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.             positionabsolute;   
    3.             width200px;   
    4.             height100px;   
    5.             background#008aff;   
    6.         }   
    7.         .box2{   
    8.             positionabsolute;   
    9.             margin-top20px;   
    10.             width200px;   
    11.             height60px;   
    12.             background#ffff00;   
    13.         }   
    14.         .box3{   
    15.             positionabsolute;   
    16.             margin-top40px;   
    17.             width200px;   
    18.             height20px;   
    19.             background#ff6633;   
    20.         }   
  • 效果:
     

    css的水滴效果(CSS制作各种样式的彩虹效果)

    CSS样式五,使用radial-gradient:

  • CSS Code复制内容到剪贴板
    1. .box4{   
    2.            width260px;   
    3.            height130px;   
    4.            overflowhidden;   
    5.        }   
    6.        .box5{   
    7.            width260px;   
    8.            height260px;   
    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