線性漸變

    <style>
        div{
            width: 1000px;
            height: 100px;
            margin:30px auto;
            border: 1px solid #000;
        }
        /* 語法：
            linear-gradient(方向，起始顏色，終止顏色);
            方向：to left   to right  to top   to bottom 　角度　30deg
            起始顏色
            終止顏色
        */
        div:nth-child(1){
            background-image: linear-gradient(to right,yellow ,green);
        }

        div:nth-child(2){
            background-image: linear-gradient(yellow ,green);
        }

        div:nth-child(3){
            width: 200px;
            height: 200px;
            background-image: linear-gradient(135deg,yellow,green);
        }
        
        div:nth-child(4){
            background-image: linear-gradient(to right,
                yellow 0% ,
                red 40% ,
                green 70% ,
                blue 100%);
        }

        div:nth-child(5) {
            background-image: linear-gradient(45deg,
                yellow 0%,
                yellow 25%,
                blue 25%,
                blue 50%,
                red 50%,
                red 75%,
                green 75%,
                green 100%
            );
        }

        div:nth-child(6){
            background-image: linear-gradient(135deg,
                #000 0%,
                #000 25%,
                #fff 25%,
                #fff 50%,
                #000 50%,
                #000 75%,
                #fff 75%,
                #fff 100%
            );

            /*background-repeat: no-repeat;*/
            background-size:100px 100%;
            animation: gun 1s infinite linear;
        }

        @keyframes gun {
            0%{

            }

            100%{
                background-position: 100px 0px;
            }
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容