CSS - linear-gradient()

CSS 函式linear-gradient()用於建立包含兩個或多個顏色沿直線漸變過渡的影像。生成的影像是一種特殊的影像，其資料型別為<gradient>。

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

概述

線性漸變沒有固有的尺寸，這意味著影像沒有首選大小或縱橫比。
影像的大小將與應用它的元素的大小匹配。
<gradient>資料型別只能在使用<image>的地方使用。
linear-gradient()函式不能與<color>資料型別和諸如background-color之類的屬性一起使用。
為了建立重複自身的線性漸變，您需要使用 CSS 函式repeating-linear-gradient()。

可能的值

函式linear-gradient()可以將以下值作為引數

<side-or-corner>:
- 確定漸變的起點。
- 包含單詞to和最多兩個關鍵詞，即一個表示水平方向（左或右），另一個表示垂直方向（上或下）。
- 側邊關鍵詞的順序可以是任何順序。
- 如果未指定值，則預設值為to bottom。
- to top, to bottom, to left,和to right的等效值為0deg, 180deg, 270deg,和90deg。
- <angle>值沿順時針方向增加。
<linear-color-stop>：由顏色停止點的<color>值以及一個或兩個可選的停止位置值組成。停止位置值可以是<percentage>或<length>值。
<color-hint>：確定相鄰顏色停止點之間的漸變過渡。如果未指定值，則顏色過渡的中點是兩個顏色停止點之間的中點。

語法

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

CSS linear-gradient() - 組成

線性漸變是兩種或多種顏色沿直線或軸線（即漸變線）的漸變過渡。兩個或多個顏色停止點表示顏色的漸變過渡。參考下圖，它顯示了漸變線上兩個不同的點，顯示了起點和終點，與漸變線相交。

起點是第一個顏色停止點的開始，終點是最後一個顏色結束的地方。起點和終點附近的角顯示與這些點相同的顏色。

CSS linear-gradient() - 基本示例

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

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

   .basic-linear {
      background: linear-gradient(red, yellow);
   }
</style>
</head>
<body>
   <h1>Basic linear gradient</h1>
   <div class="basic-linear"></div>
</body>
</html>

CSS linear-gradient() - 向右上方

可以建立從一個角到另一個角對角線執行的漸變。

例如，如果希望漸變軸線從左角開始到右上角，則函式應包含“to top right”作為引數。

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

   .linear-diagonal {
      background: linear-gradient(to top right, red, yellow);
   }
</style>
</head>
<body>
   <h1>direction to top right</h1>
   <div class="linear-diagonal"></div>
</body>
</html>

CSS linear-gradient() - 角度值

還可以為漸變提供一個角度來定義方向。讓我們看一個例子，其中提到了不同的角度

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

   .linear-0deg {
      background: linear-gradient(0deg, red, yellow);
   }

   .linear-45deg {
      background: linear-gradient(45deg, red, yellow);
   }

   .linear-60deg {
      background: linear-gradient(60deg, red, yellow);
   }

   .linear-90deg {
      background: linear-gradient(90deg, red, yellow);
   }

   .linear-180deg {
      background: linear-gradient(180deg, red, yellow);
   }

   .linear-minus90deg {
      background: linear-gradient(-90deg, red, yellow);
   }
</style>
</head>
<body>
   <div class="linear-0deg">0deg</div>
   <div class="linear-45deg">45deg</div>
   <div class="linear-60deg">60deg</div>
   <div class="linear-90deg">90deg</div>
   <div class="linear-180deg">180deg</div>
   <div class="linear-minus90deg">-90deg</div>
</body>
</html>

CSS linear-gradient() - 多色

建立漸變需要至少兩種顏色，但選擇顏色數量時無需受限。預設情況下，顏色沿漸變均勻分佈。讓我們看一個例子

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

   .linear-more-than-two {
      background: linear-gradient(blue, magenta, red,yellow, orange);
   }
</style>
</head>
<body>
   <div class="linear-more-than-two"></div>
</body>
</html>

有關 linear-gradient() 的更多示例，請單擊此處。

列印頁面