首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 909
收藏 0 赞 0 分享

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

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

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.             width: 320px;   
  68.             height: 320px;   
  69.             border: solid 10px blue;   
  70.             border-radius: 100%;   
  71.             box-sizing: border-box;   
  72.             content: "";   
  73.         }   

效果：

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

更多精彩内容其他人还在看

利用纯CSS3实现动态的自行车特效源码

这篇文章主要介绍了如何利用纯CSS3实现动态的自行车的方法，文中给出了完整的实例代码，实现后的效果非常不错，大家可以直接运行看看效果，需要的朋友下面来一起学习学习吧。
收藏 0 赞 0 分享

web前端开发规范文档(2014年版本)

这篇文章主要为大家介绍了前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性,需要的朋友可以参考下
收藏 0 赞 0 分享

前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范

这篇文章主要介绍了前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范,需要的朋友可以参考下
收藏 0 赞 0 分享

手把手教你用CSS实现带箭头的流程进度条

这篇文章主要给大家介绍了利用CSS实现带箭头的流程进度条大方法，文中给出了详细的示例代码，对大家具有一定的参考价值，有需要的朋友们一起来看看吧。
收藏 0 赞 0 分享

CSS实现三栏布局的四种方法示例

可能有人不理解三栏布局是什么，其实三栏布局页面分为左中右三部分，然后对中间一部分做自适应的一种布局方式，下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法，需要的朋友可以参考借鉴，下面来一起看看吧。
收藏 0 赞 0 分享

利用css实现浮雕效果示例代码

这篇文章主要给大家介绍了利用css如何实现浮雕的效果，文中给出了详细的示例代码和解释，相信对大家有一定的参考价值，感兴趣的朋友们下面来一起看看吧。
收藏 0 赞 0 分享

浏览器默认样式（User Agent Stylesheet）的介绍与最佳处理方法

这篇文章主要给大家介绍了浏览器默认样式（User Agent Stylesheet）的相关资料，并给出了相对应的最佳解决方法。有需要的朋友可以参考借鉴，下面来一起看看吧。
收藏 0 赞 0 分享

css中px、em和rem的区别总结

相信每位前端工程师们都有这么一个体会，国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别，需要的朋友可以参考借鉴，下面来一起看看吧。
收藏 0 赞 0 分享

CSS3实现点击放大的动画实例代码

这篇文章主要给大家介绍了关于利用CSS3实现点击放大的动画效果，文中给出了完整的实例代码，相信对大家具有一定的参考价值，需要的朋友们可以一起来看看吧。
收藏 0 赞 0 分享

利用css代码实现纸飞机效果实例源码

这篇文章主要给大家介绍了如何利用css代码实现纸飞机的效果，实现后效果非常不错，文中给出了详细的实例代码，大家可以参考借鉴，下面来一起看看吧。
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22