IT工程師數位筆記本

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屬性詳解