CSS - 漸變

上一頁
下一頁

CSS 漸變允許透過在兩種或多種顏色之間建立平滑過渡來為 HTML 元素設計自定義顏色。

什麼是 CSS 漸變？

  • 在 CSS 中，漸變是一種特殊的使用者定義影像，可用於元素的背景或邊框。
  • 我們可以使用函式gradient(type, color1, color2, color3);將漸變設定為任何 HTML 元素的 background 屬性。
  • 縮放影像漸變不會降低其質量，因為這些是由瀏覽器根據開發人員程式碼定義的。

目錄


 

CSS 漸變的型別

CSS 定義了三種類型的漸變

  • 線性漸變：從左到右、從上到下或對角線過渡。
  • 徑向漸變：從中心到邊緣過渡。
  • 圓錐漸變：圍繞中心點旋轉。
選擇背景漸變

線性漸變

線性漸變建立一條沿單個方向流動的顏色帶，即從左到右、從上到下或任何角度。

語法

linear-gradient(direction, color1, color2, ...);

/* Gradient from bottom right to top left */
linear-gradient(to top left, color1, color2, ...);

/* Gradient at an angle 45 degree */
linear-gradient(45deg, red, yellow);

方向引數指定漸變的角度或方向（[向左 | 向右] || [向上 | 向下]）。

示例

為了建立基本的線性漸變，您只需要兩種顏色，稱為顏色停止點。您必須至少有兩個，但也可以有兩個以上。

以下示例演示了這一點

<html>
<head>
   <style>
      div {
         height: 70px;
         width: 100%;
      }
      .topBottom {
         background: linear-gradient(green, yellow);
      }
      .RightLeft{
         background: linear-gradient(to right, green, yellow);
      }
   </style>
</head>

<body>
   <h1>Linear gradient</h1>
   <h3>Top to Bottom ( Default )</h3>
         <div class="topBottom"></div>
   <h3>Right to left</h3>
         <div class="RightLeft"></div>
</body>
</html>

徑向漸變

徑向漸變是一種由顏色從中心點向外輻射組成的漸變型別。

在徑向漸變中，顏色在圓形或橢圓形圖案中從中心的某種顏色平滑過渡到外邊緣的另一種顏色。

語法

radial-gradient(shape size position, color1, color2..);
  • 形狀引數定義漸變的形狀（圓形或橢圓形）。
  • 大小引數指定形狀的大小。
  • 位置引數設定漸變的中心。

示例

為了建立基本的徑向漸變，您只需要兩種顏色。預設情況下，漸變的中心位於 50% 50% 標記處；其中漸變為橢圓形，與它所在盒子的縱橫比相匹配。

讓我們看一個例子

<html>
<head>
   <style>
      div {
         height: 100px;
         width: 100%;
      }

      .gradient {
         background: radial-gradient(green, yellow);
      } 
      .center-gradient {
         background:
            radial-gradient(
               at 0% 50%,
               green 30px,
               yellow 60%,
               magenta 20%
            );
      }
   </style>
</head>

<body>
   <h1>Radial gradient</h1>
   <h3>Simple Radial Gradient</h3>
       <div class="gradient"></div>

   <h3>Center Positioned Radial Gradient</h3>   
       <div class="center-gradient"></div>
</body>
</html>

圓錐漸變

圓錐漸變，也稱為圓錐漸變或角漸變，是一種漸變型別，其中顏色以圓形或圓錐形圖案排列，從中心點以 360 度弧線向外輻射。

語法

conic-gradient(from 'angle' at 'position', 'color-list')
  • 位置（可選）：指定漸變起點的 位置。可以是百分比或像 center 這樣的關鍵字。
  • 角度（可選）：以度為單位指定漸變的起始角度。
  • 顏色列表：定義漸變中的顏色及其位置。

示例

在這個例子中，我們將建立一個具有四種不同顏色的圓錐漸變餅圖，然後將漸變對齊到圖表中的不同位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
      div {
         height: 80px;
         width: 110px;
         border-radius: 50%; 
      }
      .gradient1{
         background: conic-gradient(
                        from 45deg at 50% 50%, 
                        red, yellow, green, 
                        blue, red);
      }
      .gradient2{
         background: conic-gradient(
                        from 45deg at 20% 40%, 
                        red, yellow, green, 
                        blue, red);
      }
    </style>
</head>

<body>
    <h1>Conic Gradient Example</h1>
    <h3>Align at center</h3>
        <div class="gradient1"></div>
    <h3>Align at 20-40</h3>
        <div class="gradient2"></div>
</body>
</html>

邊框漸變

CSS 漸變也可用於建立花哨的邊框。您可以使用各種漸變在邊框圖案中建立效果。

語法

border-image: linear-gradient('color-list')

您還可以使用徑向漸變和圓錐漸變來建立邊框。

示例

這是一個在建立邊框中使用漸變的示例

<!DOCTYPE html>
<html lang="en">
<head>
      <style>
         .gradient-border {
            height: 200px;
            width: 200px;
            border: 10px solid;
            border-image: linear-gradient(
                              to right, 
                              red, yellow, 
                              green, blue) 1;
         }
      </style>
</head>
<body>
      <h2>Gradient Border </h2>
      <div class="gradient-border"></div>
</body>
</html>

顏色停止定位

為漸變定位顏色停止點允許控制漸變過渡發生的位置。

語法

linear-gradient(to right, red 10%, pink 30%, blue 60%)
  • 向右：指定漸變的方向。
  • 紅色 10%：將紅色設定為在漸變的 10% 處停止。
  • 粉色 30%：將粉色設定為在漸變的 30% 處停止。
  • 藍色 60%：將藍色設定為在漸變的 60% 處停止。

示例

<html>
<head>
   <style>
      div {
         height: 100px;
         width: 100%;
      }

      .linear-position {
         background: linear-gradient(to right, 
                        blue 15px, magenta 33%, 
                        red 66%, yellow 60%, 
                        orange 100%);
      }
   </style>
</head>

<body>
   <div class="linear-position"></div>
</body>
</html>

建立硬線

可以在兩種顏色之間建立一條硬線，這樣就不會看到平滑的過渡。可以透過在 CSS 漸變中仔細定位顏色停止點來實現此效果。檢視以下示例

示例

在這個例子中，我們將使用漸變函式建立硬線。

<html>
<head>
   <style>
      div {
         height: 100px;
         width: 100px;
         display: inline-block;
         text-align: center;
         margin: 5px;
      }

      .linear-hard-line {
         background: linear-gradient(to top right, 
                           green 50%, orange 50%);
      }
   </style>
</head>
<body>
   <div class="linear-hard-line"></div>
</body>
</html>

使用漸變建立顏色帶

為了建立條紋效果，每種顏色的第二個顏色停止點設定為與相鄰顏色第一個顏色停止點相同的位置。

語法

linear-gradient(to right, red 10%, 
               pink 10% 30%, 
               blue 60% 80%,
               yellow 80%);

示例

在這個例子中，我們將建立一個多色顏色帶。

<html>
<head>
   <style>
      div {
         height: 100px;
         width: 100%;
      }

      .linear-gradient-stripes {
         background: linear-gradient(
                     to right,
                     green 20%,
                     lightgreen 20% 40%, 
                     orange 40% 60%,
                     yellow 60% 80%,
                     red 80%);
      }
   </style>
</head>
<body>
   <div class="linear-gradient-stripes">
   </div>
</body>
</html>

堆疊漸變

一個漸變可以堆疊在另一個漸變之上。只需確保頂部的漸變不是完全不透明的，這樣就可以看到它下面的漸變。

示例

讓我們看一個堆疊漸變的例子。

<html>
<head>
   <style>
      div {
         height: 200px;
         width: 100%;
      }
      .stacked-linear {
         background: 
            linear-gradient(90deg, green, yellow),
            linear-gradient(220deg, white 70.71%, black 38%),
            linear-gradient(217deg, orange, grey 70.71%);
      }
   </style>
</head>

<body>
   <div class="stacked-linear">
   </div>
</body>
</html>

相關函式

下表列出了與 CSS 漸變相關的所有函式

漸變型別 描述 示例
linear-gradient() 一種漸變型別，其中顏色在一條直線上從一個點過渡到另一個點。
radial-gradient() 由顏色從中心點向外輻射組成的漸變型別。
conic-gradient() 一種漸變型別，其中顏色以圓形或圓錐形圖案排列。
repeating-linear-gradient() 允許您建立在指定方向上重複的線性漸變圖案。
repeating-radial-gradient() 允許您建立重複的徑向漸變圖案。
repeating-conic-gradient() 允許您建立重複的圓錐漸變圖案。
列印頁面
上一頁
下一頁
廣告