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>

打印页面