背景渐变

        .test1 {
            /* 线性渐变,方向改变 to left/right/top/bottom/bottom right(对角)*/
            background: linear-gradient(to right bottom,
                    #f00,
                    #00f,
                    #f60,
                    #000);
        }
        .test2 {
            /* 线性渐变,角度控制方向 0-180/0-(-180)*/
            background: linear-gradient(-45deg,
                    #f00,
                    #00f,
                    #f60,
                    #000);
        }
        .test3 {
            /* 重复线性渐变,角度控制方向 0-180/0-(-180)*/
            background-image: repeating-linear-gradient(45deg red, yellow 10%, green 20%);
            background-color: red;
            /* 浏览器不支持的时候显示 */
        }
        .test4 {
            /* border-radius: 50%; */
            height: 200px;
            background: radial-gradient(circle, red 3%, yellow 41%, green 80%);
        }

        .test5 {
            /* border-radius: 50%; */
            height: 200px;
            background: radial-gradient(ellipse, red 3%, yellow 41%, green 80%);
        }

        .test6 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            /* 锥形渐变 */
            /* https://juejin.cn/post/6971325956409524261 */
            background-image: conic-gradient(orange, purple 30%);
            background-image: conic-gradient(orange 30%, purple 30%);

        }

文字渐变

        p {
            margin: 100px auto;
            text-align: center;
            font-size: 60px;
            /* 关键代码 -  background-clip：规定背景的绘制区域，这里的text是背景被裁剪到文字 */
            background-image: linear-gradient(0deg, red, blue);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }