CSS漸變：語(yǔ)法速成課程

過(guò)去，大多數(shù)網(wǎng)站大量使用圖片來(lái)創(chuàng)建漂亮的UI。多虧了各種CSS屬性，這種趨勢(shì)已經(jīng)改變。本教程將幫助您學(xué)習(xí)CSS漸變。您可以使用漸變替換各種UI元素以及背景中的圖像。稍加練習(xí)，您就可以創(chuàng)建復(fù)雜的圖案，而無(wú)需使用任何圖像。

CSS漸變?cè)跒g覽器中具有良好的支持性，允許您在兩個(gè)或多個(gè)指定的顏色之間創(chuàng)建平滑的視覺(jué)過(guò)渡。漸變使您可以控制許多設(shè)置，例如漸變的大小、角度、顏色停止位置等。

在本篇文章中，我將介紹線性、徑向以及較新的重復(fù)漸變。

關(guān)鍵要點(diǎn)

• CSS漸變?cè)跒g覽器中得到廣泛支持，允許在兩個(gè)或多個(gè)指定的顏色之間平滑過(guò)渡，并控制許多設(shè)置，例如大小、角度和顏色停止位置。
• 線性漸變是最常用的漸變，沿直線從一種顏色過(guò)渡到另一種顏色。這可以通過(guò)指定方向或角度來(lái)控制。
• 徑向漸變以圓形或橢圓形圖案過(guò)渡顏色，從單個(gè)點(diǎn)開始并向外擴(kuò)展?？梢允褂酶鞣N參數(shù)來(lái)控制徑向漸變的形狀、大小和位置。
• 重復(fù)漸變與其他漸變類似，但會(huì)無(wú)限重復(fù)顏色停止位置，允許創(chuàng)建復(fù)雜的圖案和背景。它們采用與非重復(fù)漸變相同的參數(shù)。

線性漸變

線性漸變是最常用的漸變。它看起來(lái)像這樣，括號(hào)中的值表示值的類型：

<code>.example {
  background: linear-gradient(
    [方向], [第一種顏色], [第二種顏色], [更多顏色 ...]
  );
}</code>

如果您不指定方向，漸變將從頂部開始，具有第一種顏色的完整強(qiáng)度，然后在到達(dá)底部時(shí)平滑過(guò)渡到最后一種顏色。

為了獲得更多控制，您可以指定漸變的方向。您可以使用簡(jiǎn)單的術(shù)語(yǔ)（例如left、bottom right）來(lái)實(shí)現(xiàn)，也可以指定角度。以下代碼片段創(chuàng)建從左到右的背景：

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

查看CodePen上的示例： Left to Right Linear Gradient

較舊的瀏覽器支持略微不同的語(yǔ)法，并且需要特定于瀏覽器的前綴。在舊版瀏覽器中，您會(huì)指定起點(diǎn)而不是終點(diǎn)。舊版瀏覽器的CSS3漸變代碼如下所示：

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

為線性漸變指定角度

如果您需要以特定角度創(chuàng)建漸變，可以直接指定一個(gè)角度。以下代碼創(chuàng)建60度角的漸變：

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

將從下到上的線視為零度，如果線順時(shí)針移動(dòng)，則角度會(huì)增加。例如：

<code>.example {
  background: linear-gradient(0deg, red, blue);
}</code>

這將創(chuàng)建一個(gè)底部為紅色，頂部為藍(lán)色的漸變。而以下代碼將創(chuàng)建一個(gè)水平漸變，左側(cè)為紅色，右側(cè)為藍(lán)色：

<code>.example {
  background: linear-gradient(
    [方向], [第一種顏色], [第二種顏色], [更多顏色 ...]
  );
}</code>

查看CodePen上的示例：Linear Gradients with Different Angles

在線性漸變中指定顏色停止位置

如果您想不均勻地更改顏色，您可以自己指定顏色停止位置。顏色停止位置可以指定為百分比值或絕對(duì)長(zhǎng)度。您不需要為第一個(gè)和最后一個(gè)顏色指定停止位置。給定顏色在其指定的顏色位置上具有其完整強(qiáng)度。這是一個(gè)示例：

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

如果沒(méi)有指定停止位置，顏色將均勻間隔。

查看CodePen上的示例：Linear Gradient with Color Stops

徑向漸變

徑向漸變不太常見，也更復(fù)雜。這是徑向漸變的語(yǔ)法：

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

當(dāng)沒(méi)有指定任何內(nèi)容時(shí)，默認(rèn)形狀為橢圓形，大小為最遠(yuǎn)角，位置為中心。顏色停止位置的指定方式與線性漸變完全相同。以下代碼片段將繪制橢圓形徑向漸變：

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

查看CodePen上的示例：Radial Gradient Example

更改徑向漸變的大小

徑向漸變的大小由四個(gè)值決定：closest-side、farthest-side、closest-corner和farthest-corner。當(dāng)與shape值一起使用時(shí)，這些關(guān)鍵字定義形狀。漸變的形狀是在假設(shè)漸變將持續(xù)無(wú)限地延伸，超出應(yīng)用漸變的元素的邊界的情況下工作的。

讓我們來(lái)看一個(gè)例子，使這一點(diǎn)更清楚。我們將在四個(gè)元素上創(chuàng)建四個(gè)漸變：

<code>.example {
  background: linear-gradient(0deg, red, blue);
}</code>

在下面的CSS中，我使用了四個(gè)關(guān)鍵字值：

<code>.example {
  background: linear-gradient(90deg, red, blue);
}</code>

查看CodePen上的示例：Radial Gradients with Different Size Keyword Values

請(qǐng)注意，在演示中，每個(gè)漸變之間存在細(xì)微但明顯的差異。

在徑向漸變中定義顏色停止位置

徑向漸變中的顏色停止位置類似于線性漸變。請(qǐng)注意，我還將圓心的位置指定為百分比。如果需要，也可以使用像素值。以下是一個(gè)代碼片段來(lái)演示這一點(diǎn)：

<code>.example {
  background: linear-gradient(
    to bottom, yellow, red 70%, black
  );
}</code>

查看CodePen上的示例：Radial Gradient with Color Stops

重復(fù)漸變

重復(fù)漸變與其他漸變類似，并采用相同的參數(shù)。唯一的區(qū)別是它們會(huì)無(wú)限重復(fù)顏色停止位置。顏色的位置會(huì)根據(jù)基本漸變長(zhǎng)度的倍數(shù)進(jìn)行偏移。正如您將看到的，這種重復(fù)允許我們創(chuàng)建復(fù)雜的圖案和背景。

需要注意的一點(diǎn)是，當(dāng)您在同一個(gè)元素上使用多個(gè)重復(fù)漸變時(shí)，第一個(gè)漸變將顯示在頂部。當(dāng)然，這意味著如果第一個(gè)漸變的每種顏色都是100%不透明的（即沒(méi)有透明度），則堆棧中的其他漸變將不可見。

重復(fù)線性漸變

要?jiǎng)?chuàng)建基本的重復(fù)線性漸變，我們可以執(zhí)行以下操作：

<code>.example {
  background: linear-gradient(
    [方向], [第一種顏色], [第二種顏色], [更多顏色 ...]
  );
}</code>

查看CodePen上的示例：Repeating Linear Gradient

要突然更改顏色，您必須指定兩種顏色。要?jiǎng)?chuàng)建微妙的圖案，您只需添加另一個(gè)漸變，就像添加多個(gè)背景圖像一樣：

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

這次我將漸變?cè)O(shè)置為透明而不是白色。我建議您嘗試不同的顏色停止位置和角度。

查看CodePen上的示例：Repeating Linear Gradient with Multiple Gradients

重復(fù)徑向漸變

重復(fù)徑向漸變類似于標(biāo)準(zhǔn)徑向漸變。以下是如何創(chuàng)建簡(jiǎn)單的重復(fù)徑向漸變的代碼：

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

查看CodePen上的示例：Repeating Radial Gradient

您還可以像這樣分層多個(gè)重復(fù)徑向漸變：

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

查看CodePen上的示例：Repeating Radial Gradient with Multiple Gradients

結(jié)論

在本教程中，我嘗試涵蓋CSS漸變的各個(gè)方面。在許多需要簡(jiǎn)單圖案的情況下，漸變可以消除使用圖像的需要。當(dāng)然，雖然漸變確實(shí)避免了圖像的額外HTTP請(qǐng)求，但它們?nèi)匀豢赡軐?dǎo)致性能問(wèn)題，因此應(yīng)謹(jǐn)慎使用。

關(guān)于CSS漸變的常見問(wèn)題

CSS中的線性漸變和徑向漸變有什么區(qū)別？

在CSS中，漸變用于在兩個(gè)或多個(gè)指定的顏色之間創(chuàng)建平滑的過(guò)渡。線性漸變沿直線過(guò)渡顏色，從一個(gè)點(diǎn)開始到另一個(gè)點(diǎn)結(jié)束。漸變的方向可以通過(guò)角度（例如“to right”或“45deg”）或通過(guò)聲明起點(diǎn)（例如“to top right”）來(lái)定義。

另一方面，徑向漸變以圓形或橢圓形圖案過(guò)渡顏色。它們從一個(gè)點(diǎn)開始并向外擴(kuò)展，創(chuàng)建一個(gè)圓形或橢圓形形狀。可以使用各種參數(shù)來(lái)控制徑向漸變的形狀、大小和位置。

如何在CSS中創(chuàng)建重復(fù)漸變？

CSS提供了一種使用repeating-linear-gradient()和repeating-radial-gradient()函數(shù)創(chuàng)建重復(fù)漸變的方法。這些函數(shù)的工作方式與其非重復(fù)對(duì)應(yīng)函數(shù)類似，但它們會(huì)無(wú)限期地重復(fù)指定的漸變圖案，從而創(chuàng)建一個(gè)無(wú)縫重復(fù)的圖案。這些函數(shù)的語(yǔ)法類似于linear-gradient()和radial-gradient()的語(yǔ)法，但是您需要以創(chuàng)建重復(fù)圖案的方式指定顏色停止位置。

CSS漸變中的顏色停止位置是什么？

顏色停止位置是定義您想要渲染平滑過(guò)渡的顏色以及每種顏色應(yīng)在漸變中出現(xiàn)的點(diǎn)。在CSS漸變中，您可以根據(jù)需要指定任意數(shù)量的顏色停止位置。每個(gè)顏色停止位置都由一個(gè)顏色值定義，后跟可選的長(zhǎng)度或百分比。如果您不指定長(zhǎng)度或百分比，則顏色停止位置將均勻間隔。

如何控制線性漸變的方向？

可以使用linear-gradient()函數(shù)的第一個(gè)參數(shù)來(lái)控制線性漸變的方向。此參數(shù)可以是角度（例如“45deg”），也可以是指定起點(diǎn)的關(guān)鍵字，例如“to right”或“to top left”。如果您不指定方向，則漸變將從上到下。

如何控制徑向漸變的形狀和大小？

可以使用radial-gradient()函數(shù)的第一個(gè)參數(shù)來(lái)控制徑向漸變的形狀和大小。此參數(shù)可以是形狀關(guān)鍵字（“circle”或“ellipse”），后跟可選的大小關(guān)鍵字（“closest-side”、“farthest-side”、“closest-corner”、“farthest-corner”）和/或位置。如果您不指定形狀，則漸變?yōu)闄E圓形。如果您不指定大小，則漸變將延伸到最近的一側(cè)。

我可以在CSS漸變中使用透明度嗎？

是的，您可以通過(guò)使用RGBA顏色值在CSS漸變中使用透明度。RGBA顏色值由以下內(nèi)容指定：rgba(red, green, blue, alpha)。alpha參數(shù)是一個(gè)介于0.0（完全透明）和1.0（完全不透明）之間的數(shù)字。

如何創(chuàng)建具有硬顏色變化的漸變？

要?jiǎng)?chuàng)建具有硬顏色變化的漸變，您可以使用具有相同位置的多個(gè)顏色停止位置。例如，“blue, green 50%, green 50%, yellow”創(chuàng)建了一個(gè)漸變，該漸變?cè)谥虚g從藍(lán)色突然變?yōu)榫G色，在末尾從綠色變?yōu)辄S色。

我可以將漸變用作背景圖像嗎？

是的，您可以將漸變用作CSS中的背景圖像。漸變函數(shù)返回CSS圖像數(shù)據(jù)類型，可以在可以使用圖像的任何位置使用。例如，您可以將漸變用作元素的背景圖像，或用作多個(gè)背景的一部分。

我可以在CSS中動(dòng)畫漸變嗎？

CSS不支持直接動(dòng)畫漸變。但是，您可以通過(guò)動(dòng)畫具有重復(fù)漸變的元素的background-position或background-size，或者通過(guò)使用漸變作為動(dòng)畫內(nèi)容上的蒙版來(lái)實(shí)現(xiàn)類似的效果。

所有瀏覽器都支持CSS漸變嗎？

所有現(xiàn)代瀏覽器（包括Chrome、Firefox、Safari、Edge和Internet Explorer 10及更高版本）都廣泛支持CSS漸變。但是，對(duì)于不支持漸變的舊版瀏覽器，您應(yīng)該提供備用顏色。

以上是CSS梯度：語(yǔ)法速效課程的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！