CSS linear-gradient() 函数

CSS linear-gradient() 语法

在 CSS 中，linear-gradient() 函数用于创建线性渐变效果。线性渐变可以从一个颜色平滑过渡到另一个颜色，或者通过多个颜色创建丰富的效果。

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

说明：

direction 用于指定渐变的方向。它可以是以下 2 种取值：

角度：表示渐变线的方向。0deg 表示从下到上（to top），180deg 表示从上到下（to bottom），90deg 表示从左到右（to right）。
关键字：指定渐变的方向。to top 表示从下到上，to bottom 表示从上到下。

示例：

linear-gradient(45deg, red, blue);     /* 渐变方向：从左下到右上 */
linear-gradient(to right, red, blue);  /* 渐变方向：从左到右 */

color-stop1、color-stop2 等是 “颜色停止点”。每个颜色停止点表示渐变的颜色和它在渐变线上的位置。我们可以设置多个颜色并指定它们的渐变位置。

颜色值：可以是任何有效的 CSS 颜色（如 #ff0000、rgb(255, 0, 0)、blue 等）。
位置值：我们还可以指定渐变中颜色的位置，可以使用百分比（如 50%）或者具体的长度值。

示例：

linear-gradient(90deg, red 0%, yellow 100%);     /* 从红色到黄色 */
linear-gradient(to bottom, red, yellow, green);  /* 红色到黄色再到绿色 */

需要注意的是，linear-gradient() 函数必须至少指定两个颜色停止点，否则无法创建渐变效果。

提示: 咱们的绿叶网很多地方也用到了线性渐变效果。合理地使用线性渐变，可以让页面的用户体验更好。

CSS linear-gradient() 摘要

属于	CSS 函数
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

CSS linear-gradient() 示例

接下来，我们通过几个简单的例子来讲解一下 CSS linear-gradient() 函数是如何使用的。

示例 1：linear-gradient() 实现垂直渐变

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 100px;
            background-image: linear-gradient(red, yellow);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

linear-gradient() 实现垂直渐变

分析：

在这个例子中，我们创建了一个从红色（red）平滑过渡到黄色（yellow）的垂直渐变。由于这里没有指定渐变方向，所以默认是从上到下。

注意: linear-gradient() 只能作为 background 或 background-image 的值，而不能作为 background-color 的值。

示例 2：linear-gradient() 指定渐变方向

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 100px;
            margin-bottom: 10px;
        }
        div:nth-child(1) {
            background-image: linear-gradient(to right, red, yellow);
        }
        div:nth-child(2) {
            background-image: linear-gradient(45deg, red, yellow);
        }
        div:nth-child(3) {
            background-image: linear-gradient(180deg, red, yellow);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

页面效果如下图所示。

linear-gradient() 指定渐变方向

分析：

第 1 个 div 使用了 to right 关键字，表示创建一个从左到右的渐变。第 2 个 div 使用了 45deg 角度值，表示创建一个沿 45 度角方向的渐变。而第 3 个 div 使用了 180deg 角度值，表示创建一个沿 180 度角方向的渐变。

示例 3：linear-gradient() 使用多个颜色停止点

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 100px;
            background-image: linear-gradient(to right, red, yellow 50%, green);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

linear-gradient() 使用多个颜色停止点

分析：

在这个例子中，linear-gradient() 使用了 3 个颜色停止点：red 在开始处、yellow 在 50% 的位置、green 在结束处，这样会创建一个从红色、到黄色、再到绿色的渐变效果。

示例 4：linear-gradient() 使用透明颜色

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 100px;
            background-image: linear-gradient(to right, rgba(255, 0, 0, 0), red);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

linear-gradient() 使用透明颜色

分析：

linear-gradient(to right, rgba(255, 0, 0, 0), red) 表示创建一个从 “透明” 到 “红色” 的渐变效果。