CSS3背景颜色渐变效果

1.CSS3透明度渐变（从左到右）

#grad {background: -webkit-linear-gradient(left,rgba(198,226,255,1),rgba(198,226,255,0.8)); /* Safari 5.1 - 6 */  background: -o-linear-gradient(right,rgba(198,226,255,1),rgba(198,226,255,0.8)); /* Opera 11.1 - 12*/  background: -moz-linear-gradient(right,rgba(209,238,238,1),rgba(209,238,238,0.8)); /* Firefox 3.6 - 15*/  background: linear-gradient(to right, rgba(209,238,238,1), rgba(209,238,238,0.8)); /* 标准的语法 */

2.从上到下的线性渐变：

#grad {  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */  background: linear-gradient(red, blue); /* 标准的语法 */}

3.从左到右的线性渐变：

#grad {  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */  background: linear-gradient(to right, red , blue); /* 标准的语法 */}

4.创建一个带有彩虹颜色和文本的线性渐变：

#grad {  /* Safari 5.1 - 6.0 */  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);  /* Opera 11.1 - 12.0 */  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);  /* Firefox 3.6 - 15 */  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);  /* 标准的语法 */  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); }

5.形状为圆形的径向渐变：

#grad {  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */  background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */}