CSS制作梦幻彩虹效果

每到春天，红得如火的木棉花，粉得如霞的芍药花，白得如玉的月季花竞相开放。它们有的花蕾满枝，有的含苞初绽，有的昂首怒放。一阵沁人心肺的花香引来了许许多多的小蜜蜂，嗡嗡嗡地边歌边舞。

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

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

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

css样式一，使用margin塌陷：

CSS Code复制内容到剪贴板

效果：

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

CSS Code复制内容到剪贴板

效果：

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

CSS Code复制内容到剪贴板

效果：

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(#ffffff70px,#ff663380px,#ffff0090px,green100px,#008aff110px,purple120px);
background:-moz-radial-gradient(#ffffff70px,#ff663380px,#ffff0090px,green100px,#008aff110px,purple120px);
background:-webkit-radial-gradient(#ffffff70px,#ff663380px,#ffff0090px,green100px,#008aff110px,purple120px);
}

本文CSS制作梦幻彩虹效果到此结束。钱可以帮穷人解决问题，却帮富人制造问题。小编再次感谢大家对我们的支持！

全站频道