CSS3：linear-gradient，線性漸變的使用方法

CSS3 漸變（gradients）能夠讓你在兩個或多個指定的顏色之間顯示平穩的過渡。 之前，你必須使用圖像來實現這些效果，如今經過使用 CSS3 的漸變（gradients）便可實現。此外，漸變效果的元素在放大時看起來效果更好，由於漸變（gradient）是由瀏覽器生成的。

本文只講述表準的語法，要想兼容更多瀏覽器能夠到網上搜索出不少解決方案，邏輯基本一致。

1.語法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：默認爲to bottom，即從上向下的漸變；

stop：顏色的分佈位置，默認均勻分佈，例若有3個顏色，各個顏色的stop均爲33.33%。

2.示例：to left、top right、to bottom、to top

div { background:linear-gradient(to left, red , blue) }
div { background:linear-gradient(to right, red , blue) }
div { background:linear-gradient(to bottom, red , blue) } /* 瀏覽器默認值 */
div { background:linear-gradient(to top, red , blue) }

分別產生「從右到左」、「從左到右」、「從上到下」、「從下到上」的「紅色–綠色」漸變，效果以下圖：

  

3.示例：to right bottom、top right top、top left bottom、top left top

div { background: linear-gradient(to right bottom, red , blue); }
div { background: linear-gradient(to right top, red , blue); }
div { background: linear-gradient(to left bottom, red , blue); }
div { background: linear-gradient(to left top, red , blue); }

分別產生到「右下角」、「右上角」、「左下角」、「左上角」的漸變，效果以下圖：

 

注意：top right bottom和top bottom right是等同的

4.使用角度

div { background: linear-gradient(10deg, red, blue) }

效果以下圖：

5.多個漸變點

5.1 多個漸變點默認均勻分佈

div { background: linear-gradient(to right, red, blue, green) }

理論上漸變點數目不受限制，實際效果以下圖：

5.2 多個漸變點不均勻分佈

div { background: linear-gradient(red 5%, green 15%, blue 60%) }

6.重複性漸變

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }

10%的位置爲yellow，20%的位置爲green，而後按照這20%向下重複，效果以下圖：

7.使用rgba

div { background:linear-gradient(to right, rgba(255, 0 ,0, 1), rgba(255, 0 ,0 , 0)) }

從紅色的不透明，到全透明的漸變，效果圖以下：

參考文章：CSS3 漸變（Gradients）、CSS3 Gradient_gradient, css3屬性詳解