CSS3 线性渐变

CSS3线性渐变(默认从上到下)

语法：#grad{background-image: linear-gradient(#e66465, #9198e5);}

从左到右：#grad{background-image: linear-gradient(to right, red , yellow);}

对角（左上到右下）：#grad { background-image: linear-gradient(to bottom right, red, yellow);}

实用角度（逆时针方向）

可以做你想要的任意渐变方向
90 - x = y 其中 x 为标准角度，y为非标准角度
例：#grad {background-image: linear-gradient(Xdeg,color1, color2);}

可使用多个颜色节点：#grad {background-image: linear-gradient(color1, color2, color3);
}

使用透明度（transparent）
从左到右的线性渐变，带有透明度：#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}