如何用html制作彩虹,用 CSS 制作彩虹

昨天晚上，林柯突然对木可说，你不是在学前端吗，那你能用代码画出一个彩虹吗？木可笑着说，虽然我技术不高，但或许可以一试。话一说完，木可当即打开了代码编辑器。

第一步，创建一个 div 元素，用 CSS 将其设置为圆形，背景颜色为白色。

div {

width: 400px;

height: 400px;

background-color: #fff;

border-radius: 50%;

}

第二步，通过 CSS 径向渐变设置彩虹颜色，依次为橙红(orangered)、黄(yellow)、绿(green)、蓝(blue)、紫(purple)，渐变形状为圆形(circle)。

div {

background-image: radial-gradient(circle, orangered, yellow, green, blue, purple);

}

第三步，分配颜色区域。从圆心向外(距外切正方形边)60%的区域为白色，剩余区域由各颜色平分，即每种颜色占8%。

div {

background-image: radial-gradient(circle closest-side,#fff 60%, orangered 60%, orangered 68%, yellow 68%, yellow 76%, green 76%, green 84%, blue 84%, blue 92%, purple 92%);

}

第四步，设置彩虹位置。创建一个容器(section)以包裹 div，并隐藏彩虹下面部分。

section {

height: 150px;

overflow: hidden;

}

最终效果如下：

林柯看了木可的这一番操作，说，效果虽然简单，不过能够学以致用，也还是不错的，下次有机会再考考你吧。