CSS 3使我们可以在HTML元素中使用渐变作为背景色。渐变是颜色过渡，其中区域从一种颜色渐变为另一种颜色。渐变通常用于模拟上方有色表面上的光的效果。

CSS渐变有两种变体：线性渐变和径向渐变。线性渐变以线性方式更改颜色。径向渐变以圆形方式更改颜色。线性和径向渐变都将在本文中介绍。

线性渐变

线性渐变以线性方式为区域或者文本着色，这意味着颜色会从一种颜色线性更改为另一种颜色。这是一个可视的CSS线性渐变示例：

这是创建此渐变的代码：

<style>
    #gradient1 {
        background-image: linear-gradient(180deg, #666666, #000000);
        height: 100px;
    }
</style>
<div id="gradient1"></div>

该示例使用CSS函数" linear-gradient()"作为" background-image" CSS属性的值。这使浏览器使用线性渐变为HTML元素的背景上色。

" linear-gradient()"函数采用三个参数。第一个参数是渐变的角度。在上面的示例中，我使用了" 180deg"，即180度。第二个和第三个参数是"从"和"到"颜色。在上面的示例中，渐变从颜色"#666666"(深灰色)变为"#000000"(黑色)。

这是一个使用45度角从绿色变为蓝色的示例：

颜色停止

" linear-gradient()"函数中的颜色参数称为"色标"。色标由颜色和完全应用颜色的百分比位置组成。看一下这个线性渐变示例：

<style>
    #gradient3 {
        background-image: linear-gradient(180deg, #00ff00 20%, #0000ff 80%);
        height: 100px;
    }
</style>
<div id="gradient3"></div>

请注意，这两种颜色现在后面有一个百分比(" 20％"和" 80％")。这意味着渐变从20％开始进入绿色区域，而80％结束进入蓝色区域。这是应用于HTML元素时线性渐变的外观：

请注意，渐变开始之前的区域如何用第一种颜色着色，而渐变结束之后的区域如何用第二种颜色着色。

我们可以使用两个以上的色标。这是一个使用3个色标的线性渐变示例：

<style>
    #gradient4 {
        background-image: linear-gradient(45deg, #00ff00 20%, #ff0000 50%, #0000ff 80%);
        height: 100px;
    }
</style>
<div id="gradient4"></div>

此示例在渐变中间(位于" 50％"处)具有红色。这是应用于HTML元素时线性渐变的外观：

径向渐变

径向渐变从中心点扩展其颜色变化，并以圆形或者椭圆形的方式扩展。这是一个视觉示例：

径向渐变是使用" radial-gradient()" CSS函数定义的。这是生成上面示例的代码：

<style>
    #gradient5 {
        background-image: radial-gradient(ellipse farthest-corner at 50% 50% , #00FFFF 0%, #0000FF 95%);
        height: 100px;
    }
</style>
<div id="gradient5"></div>

径向渐变语法

" radial-gradient()"函数遵循以下语法：

radial-gradient(
    shape
    [length | percentage] [| extent-keyword]
    [at position]
    ,color stop
    ,color stop
    [,color stop]
);

" shape"参数可以采用" circle"或者" ellipse"的值。这指定径向渐变的形状应为圆形还是椭圆形。

" length"参数设置圆形渐变的径向渐变的半径。对于椭圆渐变，我们需要指定2个长度参数。一个用于X和Y方向上的渐变半径。对于椭圆渐变，我们还可以使用百分比作为长度，而不是px，em等。

"在位置"指定渐变的中心。如果未指定这些参数，则假定位置在HTML元素的中心。关键字" at"被写为文本，位置被写为两个坐标。例如200px 50px。这意味着"在点x = 200，y = 50"。

可以使用"范围关键字"代替" length"参数来确定径向渐变的大小。可能的"范围关键字"值是：

• 最近端
• 壁橱角落
• 最远的一面
• 最远的角落

这些关键字使径向渐变从渐变的中心(位置)在水平和垂直方向上扩展到渐变所应用到的HTML元素的最近侧，最近角，最远侧或者最远角。

颜色停止参数由2个或者多个颜色停止定义组成，以逗号分隔。同样，色标定义包括一个颜色值和一个百分比，该百分比告诉该颜色位于渐变中的距离。 "定位"是指渐变从该颜色开始或者以该颜色结束时具有该颜色的位置。

以下是一些示例，向我们展示该语法的实际外观，以及相应的径向渐变在渲染时的外观。

<style>
  #gradient6 {
    background-image: radial-gradient(circle, #FF0000 0%, #0000FF 100%);
    height: 100px;
  }
</style>
<div id="gradient6"></div>

<style>
  #gradient7 {
    background-image: radial-gradient(circle 100px, #FF0000 0%, #0000FF 100%);
    height: 100px;
  }
</style>
<div id="gradient7"></div>

<style>
  #gradient8 {
    background-image: radial-gradient(circle 100px at 200px 50px, #FF0000 0%, #0000FF 100%);
    height: 100px;
  }
</style>
<div id="gradient8"></div>

<style>
  #gradient9 {
    background-image: radial-gradient(circle closest-side at 200px 50px, #FF0000 0%, #0000FF 100%);
    height: 100px;
  }
</style>
<div id="gradient9"></div>

<style>
  #gradient10 {
    background-image: radial-gradient(circle closest-corner at 200px 50px, #FF0000 0%, #0000FF 100%);
    height: 100px;
  }
</style>
<div id="gradient10"></div>

<style>
  #gradient11 {
    background-image: radial-gradient(ellipse, #FF0000 0%, #0000FF 100%);
    height: 100px;
  }
</style>
<div id="gradient11"></div>

<style>
  #gradient12 {
    background-image: radial-gradient(ellipse 100px 50px, #FF0000 0%, #0000FF 100%);
    height: 100px;
  }
</style>
<div id="gradient12"></div>

<style>
  #gradient13 {
    background-image: radial-gradient(ellipse 100px 50px at 200px 50px, #FF0000 0%, #0000FF 100%);
    height: 100px;
  }
</style>
<div id="gradient13"></div>

<style>
  #gradient14 {
    background-image: radial-gradient(ellipse farthest-side at 200px 50px, #FF0000 0%, #0000FF 100%);
    height: 100px;
  }
</style>
<div id="gradient14"></div>

<style>
  #gradient15 {
    background-image: radial-gradient(ellipse farthest-corner at 200px 50px, #FF0000 0%, #0000FF 100%);
    height: 100px;
  }
</style>
<div id="gradient15"></div>

CSS渐变与SVG渐变

CSS渐变不是用渐变为区域或者形状着色的唯一选择。 SVG还内置了渐变功能，并且功能非常强大。我们可以在我的SVG渐变教程中阅读有关SVG渐变的信息。

要将SVG渐变用作HTML元素的背景，可以将SVG图像用作HTML元素的背景图像，并在SVG图像内部创建一个带有渐变的矩形。然后缩放背景图像以填充HTML元素。有关更多信息，请参见CSS背景图像。