CSS 資料型別 - <gradient>

CSS 資料型別<gradient>是一種獨特的<image>型別，它展示了兩種或多種顏色之間的漸進過渡。

漸變沒有固有的尺寸，這意味著它既沒有自然尺寸或首選尺寸，也沒有首選比例。漸變的尺寸將與應用它的元素的尺寸匹配。

可能的值

CSS 資料型別<gradient>使用以下函式之一作為值來定義

linear-gradient()：沿直線在兩種或多種顏色之間進行漸進過渡。使用linear-gradient()函式生成。
radial-gradient()：從中心點（原點）開始，在兩種或多種顏色之間進行漸進過渡。使用radial-gradient()函式生成。
conic-gradient()：圍繞圓形在兩種或多種顏色之間進行漸進過渡。使用conic-gradient()函式生成。
repeating-linear-gradient()：線性漸變重複以填充空間。使用repeating-linear-gradient()函式生成。
repeating-radial-gradient()：徑向漸變重複以填充空間。使用repeating-radial-gradient()函式生成。

語法

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

CSS <gradient> - 線性漸變

以下示例演示了線性漸變的使用

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

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

CSS <gradient> - 徑向漸變

以下示例演示了徑向漸變的使用

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

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

CSS <gradient> - 圓錐漸變

以下示例演示了 conic-gradient() 的使用

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

   .basic-conic-gradient {
      background: conic-gradient(red, yellow);
      border-radius: 50%;
   }
</style>
</head>
<body>
   <h1>Basic Conic Gradient</h1>
   <div class="basic-conic-gradient"></div>
</body>
</html>

CSS <gradient> - 重複線性漸變

以下示例演示了 repeating-linear-gradient 的使用

<html>
<head>
<style>
   div {
      height: 200px;
      width: 400px;
   }
   /* A repeating gradient tilted 60 degrees,
   with three color stops */
   .repeat-linear {
      background-image: repeating-linear-gradient(60deg, red, yellow 7%, black 10%);
   }
</style>
</head>
<body>
   <h1>Repeating linear gradient</h1>
   <div class="repeat-linear"></div>
</body>
</html>

CSS <gradient> - 重複徑向漸變

以下示例演示了 repeating-radial-gradient 的使用

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

   .repeat-radial {
      background: repeating-radial-gradient(
      ellipse farthest-side at 20% 20%,
      red,
      black 5%,
      yellow 5%,
      blue 10%
      );
   background: repeating-radial-gradient(
      ellipse farthest-side at 20% 20%,
      red 0 5%,
      yellow 5% 10%
      );
   }
</style>
</head>
<body>
   <h1>Repeating radial gradient</h1>
   <div class="repeat-radial"></div>
</body>
</html>

列印頁面