第一种画彩虹方法

html部分代码

<div class="rainbow">
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

css部分代码

* {
        box-sizing: border-box;
        margin: auto auto;
        
    }

    .rainbow {
        height: 200px;
        overflow: hidden;
        margin: 100px;
    }

    .rainbow div {
        overflow: hidden;
    }

    .rainbow>div {
        width: 400px;
        height: 400px;
        background-color: red;
        border-radius: 50%;
        overflow: hidden;
    }

    .rainbow>div>div {
        height: 380px;
        width: 380px;
        background-color: rgb(230, 230, 25);
        margin: 10px;
        border-radius: 50%;
    }

    .rainbow>div>div>div {
        height: 360px;
        width: 360px;
        background-color: rgb(25, 230, 25);
        margin: 10px;
        border-radius: 50%;
    }

    .rainbow>div>div>div>div {
        height: 340px;
        width: 340px;
        background-color: rgb(25, 230, 230);
        margin: 10px;
        border-radius: 50%;
    }

    .rainbow>div>div>div>div>div {
        height: 320px;
        width: 320px;
        background-color: rgb(25, 25, 230);
        margin: 10px;
        border-radius: 50%;
    }

    .rainbow>div>div>div>div>div>div {
        height: 300px;
        width: 300px;
        background-color: rgb(230, 25, 230);
        margin: 10px;
        border-radius: 50%;
    }

    .rainbow>div>div>div>div>div>div>div {
        height: 280px;
        width: 280px;
        background-color: rgb(230, 25, 128);
        margin: 10px;
        border-radius: 50%;
    }

    .rainbow>div>div>div>div>div>div>div>div {
        height: 260px;
        width: 260px;
        /* border: 1px solid black; */
        background-color: rgb(255, 255, 255);
        margin: 10px;
        border-radius: 50%;
    }

效果

第二种画彩虹方法

html部分代码

<h2>高天赐 Rainbow</h2>
    <div class="hidden">
        <div id="demo"></div><br>
    </div>

css部分代码

.hidden {
            overflow: hidden;
            height: 350px;
        }

        #demo {
            height: 700px;
            width: 700px;
            margin: auto auto;
            background: radial-gradient(white 120px, red 121px, orange, yellow, rgb(15, 192, 15), rgb(11, 126, 240), blue, indigo 70%);
            border-radius: 50%;
        }

效果