例
下面的例子表明，从顶端开始，线性渐变。 它开始红，过渡到黄色，再到蓝色：
#grad {
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(red,yellow,blue); /*
Opera 11.1-12.0 */
background: -moz-linear-gradient(red,yellow,blue); /*
Firefox 3.6-15 */
background: linear-gradient(red,yellow,blue); /* Standard
syntax */
}
试一试» 定义和用法
该linear-gradient()函数创建一个"image"代表颜色的线性渐变。
要创建必须限定至少两个色标线性渐变。 色标要渲染之间平滑过渡的颜色。 您还可以设置一个起点和一个方向(or an angle)的渐变效果一起。
线性渐变的例子：
| 版： | CSS3 |
|---|
浏览器支持
在表中的数字指定完全支持功能的一个浏览器的版本。
其次通过数字-webkit-，-moz-，或-O-指定用一个前缀工作的第一个版本。
| 功能 | |||||
|---|---|---|---|---|---|
| linear-gradient() | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -O- |
CSS语法
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );
| 值 | 描述 |
|---|---|
| direction | 限定起点和一个方向(or an angle)与梯度效应沿。 |
| color-stop1, color-stop2,... | 色标要渲染之间平滑过渡的颜色。 这个值由一个颜色值，后跟一个可选停止位置(a percentage between 0% and 100% or a length along the gradient axis) 。 |
更多示例
例
从左边开始的线性渐变。 它开始红，过渡到蓝色：
#grad {
background: -webkit-linear-gradient(left,
red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , blue); /* Standard syntax */
} 试一试» 例
开始于左上角的线性渐变(and goes to bottom right) ：
#grad {
background: -webkit-linear-gradient(left
top, red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red , blue); /* Standard syntax */
} 试一试» 例
与指定的角度线性梯度：
#grad {
background: -webkit-linear-gradient(180deg,
red, blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg,
red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(180deg, red, blue); /* Standard syntax */
} 试一试» 例
有多个颜色停止的线性渐变：
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} 试一试» 例
与透明度的线性渐变：
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} 试一试» 相关页面
CSS教程： CSS3渐变
CSS函数参考