CSS如何实现多样化的梦幻彩虹效果

来源：爱站网时间：2018-11-26编辑：网友分享

CSS如何实现多样化的梦幻彩虹效果？每个人都喜欢彩虹，都期待彩虹的出现，那爱站小编将为你们实现，接下来就为大家详细介绍CSS制作梦幻彩虹的5种效果，很美丽，很梦幻，感兴趣的小伙伴们来一起观看吧，

今天看到一篇文章，说到margin的塌陷的问题，并提供了好几个例子。

自己之前还没怎么遇到过这个问题，正好来研究一下。

XML/HTML Code复制内容到剪贴板

css样式一，使用margin塌陷：

CSS Code复制内容到剪贴板

效果：

css样式二，也是使用的margin塌陷，不过做出来的是弧形的彩虹：

CSS Code复制内容到剪贴板

效果：

css样式三，使用的是box-shadow：

CSS Code复制内容到剪贴板

.box4{
width: 200px;
height: 200px;
box-shadow: 0 10px 0 red,0 20px 0 yellow, 0 30px 0 green,0 40px 0 blue,0 50px 0 purple;
}

效果：

CSS样式四，使用position:absolute来实现，感觉这种是最常见的了

CSS Code复制内容到剪贴板

效果：

CSS样式五，使用radial-gradient：

CSS Code复制内容到剪贴板

.box4{
width: 260px;
height: 130px;
overflow: hidden;
}
.box5{
width: 260px;
height: 260px;
border-radius: 100%;
background: radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);
background: -moz-radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);
background: -webkit-radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);
}

以上就是CSS如何实现多样化的梦幻彩虹效果的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱站技术频道。