怎么样使用HTML和css或者结合js做一个简单的彩虹？先看看效果
这里是主体HTML代码
<div><div id="g" class="s"><div id="f" class="s"><div id="e" class="s"><div id="d" class="s"><div id="c" class="s"><div id="b" class="s"><div id="a" class="s"><div id="w" class="s"></div></div></div></div></div></div></div></div></div>
这里使用嵌套的方式是因为这样可以做到彩虹的层叠效果，如果有的人不太喜欢这种效果是可以把所有div放在同一层，但是每个div里面要设置一个z-index属性用于给每个div设置设置元素的堆叠顺序
这里是使用css完成效果的代码
#w{top: 140px;left: 140px;width: 140px;height: 70px;position: fixed;background-color: white;border-radius: 70px 70px 0 0;}#a{top: 120px;left: 120px;width: 180px;height: 90px;position: fixed;background-color: red;border-radius: 90px 90px 0 0;}#b{top: 100px;left: 100px;width: 220px;height: 110px;position: fixed;background-color: orange;border-radius: 110px 110px 0 0;}#c{top: 80px;left: 80px;width: 260px;height: 130px;position: fixed;background-color: yellow;border-radius: 130px 130px 0 0;}#d{top: 60px;left: 60px;width: 300px;height: 150px;position: fixed;background-color: green;border-radius: 150px 150px 0 0;}#e{top: 40px;left: 40px;width: 340px;height: 170px;position: fixed;background-color: cyan;border-radius: 170px 170px 0 0;}#f{top: 20px;left: 20px;width: 380px;height: 190px;position: fixed;background-color: blue;border-radius: 190px 190px 0 0;}#g{top: 0px;left: 0px;width: 420px;height: 210px;position: fixed;background-color: purple;border-radius: 210px 210px 0 0;}
代码中很多重复， 这里解释下每个属性的作用
border-radiu： 属性一般是用来完成圆角边框，这里运用这个效果来制作彩虹的圆弧，也可以用画布去画一个彩虹，要注意的是这个属性的值，因为是做彩虹，彩虹只有上半圆所有不需要这个属性的后两个值，而前两个的值分别为div宽的一半和div的长度background-color： 属性没什么好说的就是给背景添加颜色用来区分彩虹各个区域position： 这个属性是用来给div进行定位使各个div能重合，形成彩虹的层叠效果width和height： 这两个属性没啥好说的，最好的长宽比为1:2比较美观top和left： 这两个属性中top的值为负的每个div递减的值，而left的值为负的每次递减的值，因为每个div的宽度长度要不相同才能体现彩虹的分层效果，而彩虹是缺了下半圆的，所有宽需要减两份才能定位到中心点，而长只需要减一份就行了
下面是使用JS代码去替代上面的css代码
var demo1=document.getElementsByClassName("cla1")[0]var demo2=document.getElementsByClassName("cla2")[0]var demo3=document.getElementsByClassName("cla3")[0]var demo4=document.getElementsByClassName("cla4")[0]var demo5=document.getElementsByClassName("cla5")[0]var demo6=document.getElementsByClassName("cla6")[0]var demo7=document.getElementsByClassName("cla7")[0]var demo8=document.getElementsByClassName("cla8")[0]function func(id,w,color,p,a){id.style.width=w+"px";id.style.height=w/2+"px";id.style.backgroundColor=color;id.style.borderRadius=(w/2)+"px"+" "+(w/2)+"px"+" "+"0"+"px"+" "+"0"+"px";id.style.position=p;id.style.top=a+"px";id.style.left=a+"px";}func(demo1,420,"purple","relative")func(demo2,380,"blue","absolute",20)func(demo3,340,"cyan","absolute",20)func(demo4,300,"green","absolute",20)func(demo5,260,"yellow","absolute",20)func(demo6,220,"orange","absolute",20)func(demo7,180,"red","absolute",20)func(demo8,140,"white","absolute",20)
只需要24行代码就可以代替上面近70行css代码，因为上面的css的代码重复率很多，所以使用JS的方式会很快，但是如果样式重复率不是很多那么使用JS反而会很麻烦
