CSS linear-gradient() 函數
CSS 函數實例
以下實例演示了從頭部開始的線性漸變，從紅色開始，轉為黃色，再到藍色:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
定義與用法
linear-gradient() 函數用於創建一個線性漸變的 "圖像"。
為了創建一個線性漸變，你需要設置一個起始點和一個方向（指定為一個角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，並且你必須指定至少兩種，當然也會可以指定更多的顏色去創建更複雜的漸變效果。
線性漸變實例
支持版本：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-image: linear-gradient(direction, color-stop1, color-stop2, ...);
| 值 | 描述 |
|---|---|
| direction | 用角度值指定漸變的方向（或角度）。 |
| color-stop1, color-stop2,... | 用於指定漸變的起止顏色。 |
更多實例
實例
以下實例演示了從左側開始的線性漸變，從紅色開始，轉為黃色:
#grad {
background-image: linear-gradient(to right, red , yellow);
}
實例
以下實例演示了從左上角到右下角的線性漸變:
#grad {
background-image: linear-gradient(to bottom right, red , yellow);
}
實例
以下實例演示了線性漸變指定一個角度:
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
實例
以下實例演示了多個終止色:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
實例
以下實例使用了透明度:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
CSS 教學: CSS3 漸變