例
下面的例子表明，從頂端開始，線性漸變。 它開始紅，過渡到黃色，再到藍色：
#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函數參考