CSS -徑向漸變()

在 CSS 中，函式 **radial-gradient()** 允許您建立徑向漸變作為元素的背景影像。徑向漸變是從中心點向外輻射的漸變，顏色從該點向外以圓形或橢圓形的方式混合。它們通常用於建立視覺上吸引人的背景效果或模擬燈光和陰影。

為了建立一個基本的徑向漸變，您至少需要兩種顏色，它們被稱為 **顏色停止點**。此函式的輸出是一個物件，一種特殊的 **<image>**，其資料型別為 **<gradient>**。

概述

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

可能的值

徑向漸變透過指定漸變的中心（在 0% 處）以及結束形狀的大小和形狀（在 100% 處）來定義。函式 **radial-gradient()** 可以將以下值作為引數。

1. **<position>**: 指定漸變的位置。如果未指定值，則預設為 **<center>**。

2. **<ending-shape>**: 值可以是 **circle**（漸變為具有恆定半徑的圓形）或 **ellipse**（漸變為軸對齊的橢圓形）。如果未指定值，則預設為 **ellipse**。

3. **<size>**: 指定漸變結束形狀的大小。

如果未指定值，則預設為 **<farthest-corner>**。
值可以顯式指定或使用關鍵字。
當 **<ending-shape>** 指定為 **circle** 時，值可以作為 <length> 值顯式傳遞，該值是圓的半徑。不允許使用負值。
當 **<ending-shape>** 指定為 **ellipse** 時，值可以作為 <length-percentage> 傳遞，其中包含兩個值，提供橢圓大小；第一個值是水平半徑，第二個值是垂直半徑。百分比值相對於漸變框的尺寸。不允許使用負值。
如果未指定 **<ending-shape>**，則漸變的形狀由提供的大小決定。
一個 **<length>** 值指定一個 **circle**。**<length-percentage> 中的兩個值指定一個 **ellipse**。
單個 <percentage> 值無效。
漸變圓形和橢圓形接受各種關鍵字作為其大小，這些關鍵字在後面的部分列出。

4. **<linear-color-stop>**: 由顏色停止點的 **<color>** 值以及一個或兩個可選的停止位置值組成。

停止位置值可以是 **<percentage>** 或 **<length>** 值。
值為 0% 或 0，表示漸變的中心。
值為 100%，表示結束形狀與虛擬漸變射線的交點。

5. **<color-hint>**: 確定相鄰顏色停止點之間的漸變進度。如果未指定值，則顏色過渡的中點是兩個顏色停止點之間的中點。

下表列出了漸變圓形和橢圓形接受的關鍵字作為其大小。

關鍵字	描述
closest-side	對於圓形：漸變的結束形狀與最靠近其中心的盒子邊相交。對於橢圓形：漸變的結束形狀與最靠近中心的垂直和水平邊相交。
closest-corner	漸變的結束形狀正好與距其中心最近的盒子角相交。
farthest-side	對於圓形：漸變的結束形狀與最遠離其中心的盒子邊相交。對於橢圓形：漸變的結束形狀與最遠離中心的垂直和水平邊相交。
farthest-corner	漸變的結束形狀正好與最遠離其中心盒子的角相交。這是預設值。

語法

<gradial-gradient()> = 
  gradial-gradient( [ <ending-shape> || to <size> ]? [ at <position> ]?, <color-stop-list> )

CSS radial-gradient() - 組合

徑向漸變是沿軸線對兩種或多種顏色的漸進過渡。它由 **中心點、結束形狀** 和 **兩個或多個顏色停止點** 表示。顏色停止點放置在虛擬漸變射線上，該射線從中心水平向右延伸。

CSS radial-gradient() - 基本示例

讓我們來看一個基本的徑向漸變示例

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

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

CSS radial-gradient() - 顏色停止點定位

使用百分比或絕對長度值，可以定位徑向漸變中的顏色停止點。讓我們來看一個示例

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

  .position-radial-gradient {
     background-image: radial-gradient(red 35px, yellow 25%, green 55%);
   } 
</style>
</head>
<body>
   <h1>Position radial color stops</h1>
   <div class="position-radial-gradient"></div>
</body>
</html>

CSS radial-gradient() - 中心定位

可以使用關鍵詞、百分比或絕對長度值來定位徑向漸變的中心。如果只給出一個值，即長度或百分比，則該值將重複；否則，將重複從左到右的位置和從上到下的位置。讓我們來看一個示例

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

  .center-gradient {
      background-image:
         radial-gradient(
            at 0% 50%,
            lightgreen 30px,
            blue 60%,
            magenta 20%
   );
}
</style>
</head>
<body>
   <h1>Radial gradient center position</h1>
   <div class="center-gradient"></div>
</body>
</html>

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

列印頁面