本篇文章為大家展示了如何使用css中l(wèi)inear-gradient()，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站建設、網(wǎng)站建設與策劃設計,綏德網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設十多年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:綏德等地區(qū)。綏德做網(wǎng)站價格咨詢:18980820575

漸變是從一種顏色平滑地淡化到另一種顏色的圖像，可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。這些通常用于背景圖像，按鈕和許多其他事物中的細微著色。

漸變通過定義漸變線的起點和終點（根據(jù)漸變梯度的類型，漸變線在幾何上可以是直線、光線或螺旋）來指定漸變度，然后指定沿著這條線的點的顏色。顏色被平滑地混合以填充線的其余部分，然后每種類型的漸變通過定義使用漸變線的顏色來產(chǎn)生實際的漸變。

而css3 linear-gradient()可以通過指定漸變線為直線，然后沿該線放置幾種顏色來創(chuàng)建的線性漸變。我們可以通過創(chuàng)建無限畫布并使用垂直于漸變線的線條繪制圖像來構(gòu)建圖像，畫線的顏色是兩條相交的漸變線的顏色。這會產(chǎn)生從每種顏色到下一種顏色的平滑淡入淡出，沿指定方向前進。【相關(guān)視頻推薦：css3教程】

下面我們就給大家詳解一下漸變中的線性漸變（ linear-gradient()）的使用。

linear-gradient()的基本語法

線性漸變的語法是：

 linear-gradient( [  | to  ] , )；

其中， = [left | right] || [top | bottom]

函數(shù)里的第一個參數(shù)指定漸變線，該漸變線為漸變提供方向并確定顏色停止的位置。它可以省略， 如果是省略，就會默認為在底部中止。

漸變線的方向可以以兩種方式來指定：

1、使用

出于此參數(shù)的目的，0deg指向上方，正角度表示順時針旋轉(zhuǎn)，因此90deg指向右側(cè)。

如果為零，則可以省略單元標識符。

2、使用關(guān)鍵字（to ）

如果參數(shù)是到頂部，向右，向下，或向左，所述的角度漸變線分別是0deg，90度，180deg或270deg。

如果參數(shù)改為指定框的一個角（例如左上角），則漸變線必須成角度，使其指向與指定角相同的象限，并且垂直于與漸變框的兩個相鄰角相交的線。

從漸變框的中心開始，沿兩個方向以指定角度延伸線。結(jié)束點是漸變線上的點，其中垂直于漸變線繪制的線將與指定方向上的漸變框的角相交。起點確定相同，但方向相反。

舉個例子：

background: linear-gradient(45deg, white, black);

此示例直觀地說明了如何根據(jù)上述規(guī)則計算梯度線。這顯示了漸變線的起點和終點，以及由具有背景的元素產(chǎn)生的實際漸變。

請注意，盡管起點和終點在框之外，但它們的位置精確地正確，因此漸變在角落處為純白色，而在相反角落處為純黑色。這是有意的，這對于線性漸變總是正確的。

漸變線的長度（起點和終點之間）公式為：

abs(W * sin(A)) + abs(H * cos(A))

說明：

1、在定義漸變線方向的角度（在任何象限中）時，使得0度向上指向，正角度表示順時針旋轉(zhuǎn)，

2、W表示漸變框的寬度，

3、H表示漸變框的高度，

漸變的色標通常被放置在連接起點和結(jié)束點的梯度線上，但這不是必需的：該漸變線在可以在兩個方向上無限延伸。起點和終點僅僅是任意位置標記，在指定顏色停止時定義0％，0px等位置的起點，終點定義100％所在的位置。顏色停止允許在0％之前或100％之后具有位置。

通過找到穿過垂直于漸變線的該點的唯一線來確定任何點處的線性漸變的顏色。點的顏色是此線與其相交的點處的漸變線的顏色。

線性漸變示例

示例一：指定基本垂直漸變的各種方法

linear-gradient(yellow, blue);
linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
linear-gradient(to top, blue, yellow);
linear-gradient(to bottom, yellow 0%, blue 100%);

示例二：在梯度中使用角度

請注意，盡管角度與角點之間的角度并不完全相同，但漸變線的大小仍然是正確的，以使?jié)u變黃色恰好位于左上角，藍色恰好位于右下角。

linear-gradient(135deg, yellow, blue);
linear-gradient(-45deg, blue, yellow);

示例三：3色漸變，以及如何明確指定停止位置

linear-gradient(yellow, blue 20%, #0f0);

示例四：使用關(guān)鍵字指定的角到角漸變

請注意梯度分別是左下角和右上角的紅色和藍色，與第二個示例完全相同。此外，自動計算漸變的角度，使得50％（在這種情況下為白色）的顏色在左上角和右下角上延伸。

linear-gradient(to top right, red, white, blue)

上述內(nèi)容就是如何使用css中l(wèi)inear-gradient()，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞標題：如何使用css中l(wèi)inear-gradient()-創(chuàng)新互聯(lián)
標題URL：http://weahome.cn/article/dhgsgh.html