线性渐变

    <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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容