重复线性渐变

  div {
        width: 300px;
        height: 300px;
        margin: 20px;
    }

    /*  方向朝向左上角，red--blue渐变 */
    .box1 {
        background: linear-gradient(to top left, red, yellow, green);
    }

    /* 线性渐变：
     从45度方向开始：
     0%-20%：纯黄色
     20%-60%：黄色和粉色渐变
     60%-100%：纯粉色 */

    .box2 {
        background: -webkit-linear-gradient(45deg, yellow 20%, pink 60%);
        background: -o-linear-gradient(45deg, yellow 20%, pink 60%);
        background: -moz-linear-gradient(45deg, yellow 20%, pink 60%);
        background: -ms-linear-gradient(45deg, yellow 20%, pink 60%);
        background: linear-gradient(45deg, yellow 20%, pink 60%);
    }

    .box3 {
        background: linear-gradient(90deg, yellow 20%, pink 60%);
    }

    /* 方向：加前缀需要把to去掉，方向是相反的 */
    .box4 {
        background: -webkit-linear-gradient(right, red, yellow, green);
    }

    .box5 {
        background: linear-gradient(to right, red, yellow, green);
    }

    /* 重复线性渐变 */
    /* 兼容里的写法，先写私有前缀，在写标准的 */
    .box6 {
        background: -webkit-repeating-linear-gradient(top, red 10%, yellow 20%, green 30%);
        background: -moz-repeating-linear-gradient(top, red 10%, yellow 20%, green 30%);
        background: -o-repeating-linear-gradient(top, red 10%, yellow 20%, green 30%);
        background: -ms-repeating-linear-gradient(top, red 10%, yellow 20%, green 30%);
        /* 不加前缀记得加to */
        background: repeating-linear-gradient(to top, red 10%, yellow 20%, green 30%);
    }