CSS3 漸變（gradients）可以讓你在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過(guò)渡。 以前，你必須使用圖像來(lái)實(shí)現(xiàn)這些效果，現(xiàn)在通過(guò)使用 CSS3 的漸變（gradients）即可實(shí)現(xiàn)。此外，漸變效果的元素在放大時(shí)看起來(lái)效果更好，因?yàn)闈u變（gradient）是由瀏覽器生成的。

本文只講述表準(zhǔn)的語(yǔ)法，要想兼容更多瀏覽器可以到網(wǎng)上搜索出很多解決方案，邏輯基本一致。

1.語(yǔ)法

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

direction：默認(rèn)為to bottom，即從上向下的漸變；

stop：顏色的分布位置，默認(rèn)均勻分布，例如有3個(gè)顏色，各個(gè)顏色的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) } /* 瀏覽器默認(rèn)值 */ div { background:linear-gradient(to top, red , blue) }

分別產(chǎn)生“從右到左”、“從左到右”、“從上到下”、“從下到上”的“紅色–綠色”漸變，效果如下圖：

??

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); }

分別產(chǎn)生到“右下角”、“右上角”、“左下角”、“左上角”的漸變，效果如下圖：

?

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

4.使用角度

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

效果如下圖：

5.多個(gè)漸變點(diǎn)

5.1 多個(gè)漸變點(diǎn)默認(rèn)均勻分布

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

理論上漸變點(diǎn)數(shù)目不受限制，實(shí)際效果如下圖：

5.2 多個(gè)漸變點(diǎn)不均勻分布

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

6.重復(fù)性漸變

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

10%的位置為yellow，20%的位置為green，然后按照這20%向下重復(fù)，效果如下圖：

7.使用rgba

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

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

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

總結(jié)

以上是生活随笔為你收集整理的CSS3：linear-gradient，线性渐变的使用方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。