CSS linear-gradient线性渐变函数

1. 介绍

在前端开发中，我们经常需要使用渐变效果来美化网页的背景、文本、按钮等元素。CSS提供了多种方式来实现渐变效果，其中之一就是线性渐变函数 linear-gradient()。本文将详细介绍 linear-gradient() 函数的语法和用法，以及提供一些实例代码供参考。

2. linear-gradient() 函数基本语法

linear-gradient() 函数用于创建一个线性渐变，其语法如下：

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

<angle>：可选参数，定义渐变的角度。可以使用度数（deg）或弧度（rad）作为单位，默认为 180deg（从上到下的垂直渐变）。
to <side-or-corner>：可选参数，定义渐变的方向。<side-or-corner> 可以是 top, right, bottom, left 或者它们的组合，表示渐变的方向从哪个边缘开始。例如，to top left 表示从右上角开始向左上角渐变。
<color-stop>：至少包含一个参数，用于定义渐变的颜色和位置。颜色可以使用颜色名称、十六进制值或 RGB 值表示。位置是一个表示渐变位置的百分比值，可以是 0% 到 100% 之间的数值。

3. 线性渐变方向示例

我们可以通过调整 <angle> 参数或 to <side-or-corner> 参数来改变渐变的方向。下面是一些示例代码：

3.1 从左到右的水平渐变

background: linear-gradient(to right, red, yellow);

效果如下图所示：

-----------------------------------------
| _________________________  __________ |
|  -----------------------   ---------  |
| |                         |          | |
| |                         |          | |
| |                         |          | |
| |                         |          | |
|  -----------------------   ---------  |
| _________________________  __________ |
-----------------------------------------

3.2 从右上角到左下角的渐变

background: linear-gradient(to left bottom, blue, green);

效果如下图所示：

--------------------
    _______
--------     ------
       --------

3.3 从上到下的垂直渐变

background: linear-gradient(black, white);

效果如下图所示：

==============
=            =  
=            = 
=            =
=            =
=            =  
==============

3.4 自定义角度的渐变

background: linear-gradient(45deg, orange, pink);

效果如下图所示：

     --------
        ------
           ---
              ----
                 ---
                    --

4. 颜色停止点

除了可以设置渐变的方向外，我们还可以设置多个颜色和位置来控制渐变的效果。在 linear-gradient() 函数中，每个 <color-stop> 参数都可以包含一个颜色和一个位置。下面是一个示例代码：

background: linear-gradient(red, green 30%, blue);

渐变的起点是红色。
在 30% 处的位置是绿色。
渐变的终点是蓝色。

5. 渐变方向与颜色停止点的组合示例

我们可以将渐变方向和颜色停止点组合在一起，创建更加复杂的渐变效果。下面是一个示例代码：

background: linear-gradient(45deg, red, orange 10%, yellow 20%, lime 30%, green 40%, aqua 50%, blue 60%, purple 70%, fuchsia 80%, pink 90%, red);

效果如下图所示：