CSS 參考手冊
以下實例演示了從頭部開始的線性漸變,從紅色開始,轉(zhuǎn)為黃色,再到藍色:
linear-gradient() 函數(shù)用于創(chuàng)建一個線性漸變的 "圖像"。
為了創(chuàng)建一個線性漸變,你需要設(shè)置一個起始點和一個方向(指定為一個角度)的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡,并且你必須指定至少兩種,當然也會可以指定更多的顏色去創(chuàng)建更復(fù)雜的漸變效果。
支持版本:CSS3
表格中的數(shù)字表示支持該函數(shù)的第一個瀏覽器版本號。
"webkit" 或 "moz" 或 "o" 指定的數(shù)字為支持該函數(shù)的第一個版本號前綴。
函數(shù) | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0?-webkit- |
10.0 | 16.0 3.6?-moz- |
6.1 5.1?-webkit- |
12.1 11.1?-o- |
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
值 | 描述 |
---|---|
direction | 用角度值指定漸變的方向(或角度)。 |
color-stop1, color-stop2,... | 用于指定漸變的起止顏色。 |
以下實例演示了從左側(cè)開始的線性漸變,從紅色開始,轉(zhuǎn)為黃色:
以下實例演示了從左上角到右下角的線性漸變:
以下實例演示了多個終止色:
以下實例使用了透明度:
CSS 教程: CSS3 漸變
其他擴展