CSS - linear-gradient()

CSS 函数linear-gradient()用于创建包含两个或多个颜色沿直线渐变过渡的图像。生成的图像是一种特殊的图像，其数据类型为<gradient>。

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

概述

线性渐变没有固有的尺寸，这意味着图像没有首选大小或纵横比。
图像的大小将与应用它的元素的大小匹配。
<gradient>数据类型只能在使用<image>的地方使用。
linear-gradient()函数不能与<color>数据类型和诸如background-color之类的属性一起使用。
为了创建重复自身的线性渐变，您需要使用 CSS 函数repeating-linear-gradient()。

可能的值

函数linear-gradient()可以将以下值作为参数

<side-or-corner>:
- 确定渐变的起点。
- 包含单词to和最多两个关键词，即一个表示水平方向（左或右），另一个表示垂直方向（上或下）。
- 侧边关键词的顺序可以是任何顺序。
- 如果未指定值，则默认值为to bottom。
- to top, to bottom, to left,和to right的等效值为0deg, 180deg, 270deg,和90deg。
- <angle>值沿顺时针方向增加。
<linear-color-stop>：由颜色停止点的<color>值以及一个或两个可选的停止位置值组成。停止位置值可以是<percentage>或<length>值。
<color-hint>：确定相邻颜色停止点之间的渐变过渡。如果未指定值，则颜色过渡的中点是两个颜色停止点之间的中点。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

语法

<linear-gradient()> = 
  linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )

CSS linear-gradient() - 组成

线性渐变是两种或多种颜色沿直线或轴线（即渐变线）的渐变过渡。两个或多个颜色停止点表示颜色的渐变过渡。参考下图，它显示了渐变线上两个不同的点，显示了起点和终点，与渐变线相交。

起点是第一个颜色停止点的开始，终点是最后一个颜色结束的地方。起点和终点附近的角显示与这些点相同的颜色。

CSS linear-gradient() - 基本示例

为了创建一个基本的线性渐变，您只需要两种颜色，称为颜色停止点。您必须至少有两个，但也可以有两个以上。让我们看一个例子

Open Compiler

<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() - 向右上方

可以创建从一个角到另一个角对角线运行的渐变。

例如，如果希望渐变轴线从左角开始到右上角，则函数应包含“to top right”作为参数。

Open Compiler

<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() - 角度值

还可以为渐变提供一个角度来定义方向。让我们看一个例子，其中提到了不同的角度

Open Compiler

<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() - 多色

创建渐变需要至少两种颜色，但选择颜色数量时无需受限。默认情况下，颜色沿渐变均匀分布。让我们看一个例子

Open Compiler

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

有关 linear-gradient() 的更多示例，请单击此处。

打印页面