隨著網站的越來越普及，CSS3和HTML5必將成為網站前端發展的主流方向，特別是在移動端，高端瀏覽器給前端工程師們帶來了無以言表的體驗。

通俗的來講，CSS3可以說是CSS技術的升級版本，CSS3語言開發是朝著模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。那么，今天我首先要在馬海祥博客上跟大家分享的就是CSS3的Gradients（梯度漸變）。

首先我們先來看下新的梯度漸變語法，新的語法包含四個漸變函數：

linear-gradient()
　　radial-gradient()
　　repeating-linear-gradient()
　　repeating-radial-gradient()

這些函數名無需過多的解釋，我之后會在馬海祥博客上談到更多關于循環漸變網頁設計。

因為規范仍是初稿階段，所以我們在這些漸變函數前加以-webkit-前綴。當以后規范不再是初稿階段，我們將能夠不加前綴而使用他們。

1、Linear Gradients（線性梯度漸變）

為元素盒模型填充線性漸變是最常用的。你只需要考慮漸變從哪個方向開始。據馬海祥了解有兩種方式可以去指定它。

第一種，你可以指定漸變從哪個方向或角落開始：

linear-gradient(left, white, black)

linear-gradient(top right, white, black)

你甚至可以省略第一個參數，他將默認為top并給出一個垂直漸變。

第二種，你可以指定漸變的角度：

linear-gradient(135deg, white, black)

角度按逆時針方向旋轉，0度時為從左向右方向。

注意在所有這些情況下，漸變足夠大以填滿元素盒模型。

2、Radial Gradients（徑向梯度漸變）

徑向漸變更加復雜，在填充時有更多的選項。

馬海祥覺得最簡單的形式是以元素盒模型中心為漸變起始，向外填充至每個角落：

radial-gradient(white, black)

這相當于 radial-gradient(center, ellipse cover, white, black)。

第一個參數為可選，默認為 center ，也可以是一個點（就像 background-position ），他允許你將原點放置到其它地方：

radial-gradient(10% 30%, white, black)

原點位置后面的參數用來指定漸變的形狀和大小，這是兩種方式之一。

這種方式用一些關鍵詞來描述形狀（circle，ellipse）和大小（closest-side，closest-corner，farthest-side，farthest-corner，contain，cover）例如：

radial-gradient(30% 30%, closest-corner, white, black)

radial-gradient(30% 30%, circle closest-corner, white, black)

如果你愿意，你還可以分別指定徑向漸變的水平與垂直結束半徑：

radial-gradient(center, 5em 40px, white, black)

3、Repeating Gradients（重復梯度漸變）

循環漸變 repeating-linear-gradient()和repeating-radial-gradient()

擁有完全相同的簡寫語法，且整個漸變將被循環填充：

repeating-linear-gradient(left, red 10%, blue 30%)

這些停靠點將被循環用于調整他們首尾相連，這常常會導致顏色之間過渡強烈。

你可以避免循環末尾的顏色:

repeating-radial-gradient(top left, circle, red, blue 10%, red 20%)

4、Color Stops（色站）

為漸變指定顏色停靠點很容易；最簡單的情況下，你只需要提供一個顏色列表：

linear-gradient(left, red, green, blue)

這樣會使所有的顏色平均分布于漸變之上。web前端

如果你愿意，你還可以為個別顏色定位具體的停靠點，然后讓瀏覽器分配其它剩余的：

linear-gradient(bottom left, red 20px, yellow, green, blue 90%)

那些漸變軸線可能是條對角線；那么百分比則相應對角線的長度。

顏色的停靠點相同會使顏色之間過渡強烈：

linear-gradient(top left, red, yellow, green 60%, purple 60%, blue)

總結

以上是生活随笔為你收集整理的如何通过CSS3实现背景图片色彩的梯度渐变的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。