如何使用css中l(wèi)inear-gradient()

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

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

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

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

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

linear-gradient()的基本語法

線性漸變的語法是：

 linear-gradient( [ <angle> | to <side-or-corner> ] ,<color-stop-list> )；

其中，<side-or-corner> = [left | right] || [top | bottom]

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

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

1、使用<angle>

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

如果<angle>為零，則可以省略單元標(biāo)識符。

2、使用關(guān)鍵字（to <side-or-corner>）

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

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

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

舉個(gè)例子：

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

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

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

漸變線的長度（起點(diǎn)和終點(diǎn)之間）公式為：

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

說明：

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

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

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

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

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

線性漸變示例

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

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

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

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

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

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

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

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

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

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

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