CSS梯度：語法速效課程

CSS漸變：語法速成課程

過去，大多數網站大量使用圖片來創建漂亮的UI。多虧了各種CSS屬性，這種趨勢已經改變。本教程將幫助您學習CSS漸變。您可以使用漸變替換各種UI元素以及背景中的圖像。稍加練習，您就可以創建複雜的圖案，而無需使用任何圖像。

CSS漸變在瀏覽器中具有良好的支持性，允許您在兩個或多個指定的顏色之間創建平滑的視覺過渡。漸變使您可以控制許多設置，例如漸變的大小、角度、顏色停止位置等。

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

關鍵要點

• CSS漸變在瀏覽器中得到廣泛支持，允許在兩個或多個指定的顏色之間平滑過渡，並控制許多設置，例如大小、角度和顏色停止位置。
• 線性漸變是最常用的漸變，沿直線從一種顏色過渡到另一種顏色。這可以通過指定方向或角度來控制。
• 徑向漸變以圓形或橢圓形圖案過渡顏色，從單個點開始並向外擴展。可以使用各種參數來控制徑向漸變的形狀、大小和位置。
• 重複漸變與其他漸變類似，但會無限重複顏色停止位置，允許創建複雜的圖案和背景。它們採用與非重複漸變相同的參數。

線性漸變

線性漸變是最常用的漸變。它看起來像這樣，括號中的值表示值的類型：

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

如果您不指定方向，漸變將從頂部開始，具有第一種顏色的完整強度，然後在到達底部時平滑過渡到最後一種顏色。

為了獲得更多控制，您可以指定漸變的方向。您可以使用簡單的術語（例如left、bottom right）來實現，也可以指定角度。以下代碼片段創建從左到右的背景：

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

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

較舊的瀏覽器支持略微不同的語法，並且需要特定於瀏覽器的前綴。在舊版瀏覽器中，您會指定起點而不是終點。舊版瀏覽器的CSS3漸變代碼如下所示：

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

為線性漸變指定角度

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

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

將從下到上的線視為零度，如果線順時針移動，則角度會增加。例如：

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

這將創建一個底部為紅色，頂部為藍色的漸變。而以下代碼將創建一個水平漸變，左側為紅色，右側為藍色：

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

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

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

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

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

如果沒有指定停止位置，顏色將均勻間隔。

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

徑向漸變

徑向漸變不太常見，也更複雜。這是徑向漸變的語法：

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

當沒有指定任何內容時，默認形狀為橢圓形，大小為最遠角，位置為中心。顏色停止位置的指定方式與線性漸變完全相同。以下代碼片段將繪製橢圓形徑向漸變：

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

查看CodePen上的示例：Radial Gradient Example

更改徑向漸變的大小

徑向漸變的大小由四個值決定：closest-side、farthest-side、closest-corner和farthest-corner。當與shape值一起使用時，這些關鍵字定義形狀。漸變的形狀是在假設漸變將持續無限地延伸，超出應用漸變的元素的邊界的情況下工作的。

讓我們來看一個例子，使這一點更清楚。我們將在四個元素上創建四個漸變：

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

在下面的CSS中，我使用了四個關鍵字值：

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

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

請注意，在演示中，每個漸變之間存在細微但明顯的差異。

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

徑向漸變中的顏色停止位置類似於線性漸變。請注意，我還將圓心的位置指定為百分比。如果需要，也可以使用像素值。以下是一個代碼片段來演示這一點：

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

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

重複漸變

重複漸變與其他漸變類似，並採用相同的參數。唯一的區別是它們會無限重複顏色停止位置。顏色的位置會根據基本漸變長度的倍數進行偏移。正如您將看到的，這種重複允許我們創建複雜的圖案和背景。

需要注意的一點是，當您在同一個元素上使用多個重複漸變時，第一個漸變將顯示在頂部。當然，這意味著如果第一個漸變的每種顏色都是100%不透明的（即沒有透明度），則堆棧中的其他漸變將不可見。

重複線性漸變

要創建基本的重複線性漸變，我們可以執行以下操作：

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

查看CodePen上的示例：Repeating Linear Gradient

要突然更改顏色，您必須指定兩種顏色。要創建微妙的圖案，您只需添加另一個漸變，就像添加多個背景圖像一樣：

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

這次我將漸變設置為透明而不是白色。我建議您嘗試不同的顏色停止位置和角度。

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

重複徑向漸變

重複徑向漸變類似於標準徑向漸變。以下是如何創建簡單的重複徑向漸變的代碼：

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

查看CodePen上的示例：Repeating Radial Gradient

您還可以像這樣分層多個重複徑向漸變：

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

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

結論

在本教程中，我嘗試涵蓋CSS漸變的各個方面。在許多需要簡單圖案的情況下，漸變可以消除使用圖像的需要。當然，雖然漸變確實避免了圖像的額外HTTP請求，但它們仍然可能導致性能問題，因此應謹慎使用。

關於CSS漸變的常見問題

CSS中的線性漸變和徑向漸變有什麼區別？

在CSS中，漸變用於在兩個或多個指定的顏色之間創建平滑的過渡。線性漸變沿直線過渡顏色，從一個點開始到另一個點結束。漸變的方向可以通過角度（例如“to right”或“45deg”）或通過聲明起點（例如“to top right”）來定義。

另一方面，徑向漸變以圓形或橢圓形圖案過渡顏色。它們從一個點開始並向外擴展，創建一個圓形或橢圓形形狀。可以使用各種參數來控制徑向漸變的形狀、大小和位置。

如何在CSS中創建重複漸變？

CSS提供了一種使用repeating-linear-gradient()和repeating-radial-gradient()函數創建重複漸變的方法。這些函數的工作方式與其非重複對應函數類似，但它們會無限期地重複指定的漸變圖案，從而創建一個無縫重複的圖案。這些函數的語法類似於linear-gradient()和radial-gradient()的語法，但是您需要以創建重複圖案的方式指定顏色停止位置。

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

顏色停止位置是定義您想要渲染平滑過渡的顏色以及每種顏色應在漸變中出現的點。在CSS漸變中，您可以根據需要指定任意數量的顏色停止位置。每個顏色停止位置都由一個顏色值定義，後跟可選的長度或百分比。如果您不指定長度或百分比，則顏色停止位置將均勻間隔。

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

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

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

可以使用radial-gradient()函數的第一個參數來控制徑向漸變的形狀和大小。此參數可以是形狀關鍵字（“circle”或“ellipse”），後跟可選的大小關鍵字（“closest-side”、“farthest-side”、“closest-corner”、“farthest-corner”）和/或位置。如果您不指定形狀，則漸變為橢圓形。如果您不指定大小，則漸變將延伸到最近的一側。

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

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

如何創建具有硬顏色變化的漸變？

要創建具有硬顏色變化的漸變，您可以使用具有相同位置的多個顏色停止位置。例如，“blue, green 50%, green 50%, yellow”創建了一個漸變，該漸變在中間從藍色突然變為綠色，在末尾從綠色變為黃色。

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

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

我可以在CSS中動畫漸變嗎？

CSS不支持直接動畫漸變。但是，您可以通過動畫具有重複漸變的元素的background-position或background-size，或者通過使用漸變作為動畫內容上的蒙版來實現類似的效果。

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

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

以上是CSS梯度：語法速效課程的詳細內容。更多資訊請關注PHP中文網其他相關文章！