线性渐变

从上到下的线性渐变

.gradient-default {
    background: linear-gradient(orange, yellow);
}

从左到右的线性渐变

.gradient-utd {
    background: linear-gradient(to right, orange, yellow);
}

使用角度的线性渐变

.gradient-angel {
    background: linear-gradient(135deg, orange, yellow);
}

指定多个等间距的色标

.gradient-colors {
    background: linear-gradient(to right, red, orange, yellow, white);
}

指定多个指定位置的色标

.gradient-colorposition {
    background: linear-gradient(to right, orange, yellow 70%, red);
}

使用透明度

.gradient-opactity {
    background: linear-gradient(to right, rgba(0,0,255,0), rgba(0,0,255,1));
}

重复的线性渐变

.gradient-repeat {
    background: repeating-linear-gradient(-45deg, blue, blue 5px, white 5px, white 10px);
}