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

来源:爱站网时间:2017-12-23编辑:网友分享
这篇文章主要介绍了CSS制作各种样式的彩虹效果的相关资料,效果非常不错,具有参考借鉴价值,需要的朋友可以参考下。

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

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

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样式二,也是使用的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样式三,使用的是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样式四,使用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样式五,使用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制作各种样式的彩虹效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱站技术频道网站的支持!

上一篇:用CSS3代码绘制Hello Kitty的过程

下一篇:使用CSS3如何实现刮刮乐效果

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载