CSS中linear-gradient
//不指定方向（以下实例演示了从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:）
#grad {
background-image: linear-gradient(red, yellow, blue);
}
//指定方向（不指定方向是从上到下，指定方向0度是从下到上，90度是从右往左转）
#grad1 {
height: 100px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 100px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 100px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 100px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(-90deg, red, yellow);
}