CSS 函数

CSS 线性渐变函数 Linear-gradient() 在创建包含两种或多种颜色沿直线渐进过渡的图像时非常有用。生成的图像是一个特殊图像，具有 <gradient> 数据类型。

为了创建基本的线性渐变，您只需要两种颜色，称为色标。您必须至少有两个，但也可以有两个以上。

概述

  • 线性渐变没有固有尺寸，这意味着图像没有首选尺寸或纵横比。

  • 图像的尺寸将与其应用的元素的尺寸相匹配。

  • <gradient> 数据类型只能在 <image> 的地方使用。

  • 线性渐变函数不能与<color>数据类型和背景颜色等属性一起使用。

  • 为了创建重复的线性渐变，您需要使用 CSS 函数 <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()

    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(): 到右上

    可以创建渐变，使它们从一个角到另一个角沿对角线运行。

    例如，如果您希望渐变轴从左上角开始到右上角，则函数应包含"到右上角"作为参数。

    <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>