CSS 数据类型

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>线性渐变</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>径向渐变</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>圆锥渐变</h1>
   <div class="basic-conic-gradient"></div>
</body>
</html>

CSS <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>重复线性渐变</h1>
   <div class="repeat-linear"></div>
</body>
</html>

CSS <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>重复径向渐变</h1>
   <div class="repeat-radial"></div>
</body>
</html>