gradient设置上下渐变_CSS 背景颜色水平（垂直）渐变

1. 效果

2. 示例代码

.bg{

/* IE 6 7 8*/

filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#fdcd9d,endColorStr=#fd0000);

/* IE 10 */

background: -ms-linear-gradient(left,#fdcd9d,#fd0000);

/* firefox */

background:-moz-linear-gradient(left,#fdcd9d,#fd0000);

/*Safari5.1 Chrome 10+*/

background: -webkit-linear-gradient(left, #fdcd9d, #fd0000);

/*Opera 11.10+*/

background: -o-linear-gradient(left, #fdcd9d, #fd0000);

color:#fff;

}

.bg2{

/*IE 6 7 8*/

filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#fdcd9d,endColorStr=#fd0000);

/* IE 10 */

background: -ms-linear-gradient(top,#fdcd9d,#fd0000);

/* firefox */

background:-moz-linear-gradient(top,#fdcd9d,#fd0000);

/*Safari5.1 Chrome 10+*/

background: -webkit-linear-gradient(top, #fdcd9d, #fd0000);

/*Opera 11.10+*/

background: -o-linear-gradient(top, #fdcd9d, #fd0000);

color:#fff;

}

我是左右渐变背景

我是上下渐变背景