CSS 渐变 - 绿叶网

CSS 渐变是一种用于创建平滑过渡背景效果的技术，它可以让我们的网页更加美观大方、用户体验更好。

在浏览器网页时，我们经常可以看到各种渐变效果，包括渐变背景、渐变按钮和渐变导航等（如下图所示）。这种效果大多数都是使用 CSS 渐变技术来实现的。比如咱们的绿叶网就大量使用了 CSS 渐变效果。

在 CSS 中，渐变效果可以分为以下 2 种。

线性渐变。
径向渐变。

CSS 线性渐变

线性渐变指的是颜色沿着一条直线上进行的渐变，我们见到的大多数渐变效果都是线性渐变。在 CSS 中，我们可以使用 linear-gradient() 函数来实现线性渐变。

语法：

background: linear-gradient(方向, 开始颜色, 结束颜色);

说明：

线性渐变的 “方向” 取值有 2 种：一种是使用角度（单位为 deg），另一种是使用关键字（如下表所示）。

线性渐变的 “方向” 取值
属性值	对应角度	说明
to bottom（默认值）	180deg	从上到下
to top	0deg	从下到上
to left	270deg	从右到左
to right	90deg	从左到右
to top left	315deg	从右下角到左上角（斜对角）
to top right	45deg	从左下角到右上角（斜对角）

注意: 线性渐变使用的是 background 或 background-image 属性，而不是 background-color 属性。如果使用 background-color 属性，则不会有任何效果。

示例 1：CSS 实现线性渐变

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 150px;
            background: linear-gradient(to right, blue, yellow);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

CSS 从左到右渐变

分析：

background: linear-gradient(to right,blue,yellow) 表示线性渐变的方向为 “从左到右”，开始颜色为 blue，结束颜色为 yellow。如果改为 background: linear-gradient(to left,blue,yellow)，此时页面效果如下图所示。

CSS 从右到左渐变

我们要特别注意线性渐变的方向，虽然颜色值相同，但由于渐变方向的不同，实际得到的效果也会不一样。

示例 2：多种颜色的线性渐变

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 150px;
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

多种颜色渐变

分析：

CSS 线性渐变也可以接受一个 “值列表”，用于同时定义多种颜色的线性渐变，颜色值之间用英文逗号隔开即可。

CSS 径向渐变

径向渐变指的是颜色从内到外进行的圆形渐变（从中间往外拉，像圆一样）。径向渐变是圆形渐变或椭圆渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变。

在 CSS 中，我们可以使用 radial-gradient() 函数来实现线性渐变。

语法：

background: radial-gradient(position, shape size, start-color, stop-color);

说明：

radial-gradient() 接收以下 4 种参数。

position（可选）：用于定义圆心位置。
shape size（可选）：用于定义形状大小。它由 2 部分组成，shape 定义形状，size 定义大小。
start-color（必选）：定义开始颜色
stop-color（必选）：定义结束颜色。

其中，position 和 shape size 都是可选参数。如果省略，则表示采用默认值。start-color 和 stop-color 都是必选参数，可以有多个颜色值。

1. position 参数

参数 position 用于定义径向渐变的 “圆心位置”，取值跟 background-position 属性取值一样。它常用取值有 2 种：一种是 “数值”（如 10px）；另一种是 “关键字”（如 top），如下表所示。

参数 position 的取值（关键字）
属性值	说明
center（默认值）	中部
top	顶部
bottom	底部
left	左部
right	右部
top center	靠上居中
top left	左上
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

示例 3：径向渐变的 position 参数

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 设置 div 公共样式 */
        div {
            width: 200px;
            height: 150px;
            margin-bottom: 10px;
            line-height: 150px;
            text-align: center;
            color: white;
        }
        .first {
            background: radial-gradient(top, orange, blue); 
        }
        .second {
            background: radial-gradient(bottom, orange, blue);
        }
    </style>
</head>
<body>
    <div class="first">top</div>
    <div class="second">bottom</div>
</body>
</html>

页面效果如下图所示。

CSS 径向渐变的圆心位置

分析：

此外，大家可以尝试改变圆心位置属性值，看看实际效果如何。

2. shape size 参数

参数 shape 用于定义径向渐变的 “形状” ，它的取值如下表所示。

参数 shape 取值
属性值	说明
ellipse（默认值）	椭圆形
circle	圆形

参数 size 用于定义径向渐变的 “大小”，它的取值如下表所示。

参数 size 取值
属性值	说明
closet-side	指定径向渐变的半径长度为从圆心到离圆心最近的边
closet-corner	指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side	指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner	指定径向渐变的半径长度为从圆心到离圆心最远的角

从上面的定义完全不知道怎么回事？不用担心，这不是你的错，我们先来看几个例子就知道了。

示例 4：径向渐变的 shape 参数

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 设置 div 公共样式 */
        div {
            width: 200px;
            height: 150px;
            margin-bottom: 10px;
            line-height: 150px;
            text-align: center;
            color: white;
        }
        .first {
            background: radial-gradient(ellipse, orange, blue); 
        }
        .second {
            background: radial-gradient(circle, orange, blue);
        }
    </style>
</head>
<body>
    <div class="first">ellipse</div>
    <div class="second">circle</div>
</body>
</html>

页面效果如下图所示。

CSS 径向渐变的 shape 参数

示例 5：径向渐变的 size 参数

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 设置 div 公共样式 */
        div {
            width: 200px;
            height: 150px;
            margin-bottom: 10px;
            line-height: 150px;
            text-align: center;
            color: white;
        }
        #div1 {
            background:radial-gradient(circle closest-side, orange, blue);
        }
        #div2 {
            background:radial-gradient(circle closest-corner, orange, blue);
        }
        #div3 {
            background:radial-gradient(circle farthest-side, orange, blue);
        }
        #div4 {
            background:radial-gradient(circle farthest-corner, orange, blue);
        }
    </style>
</head>
<body>
    <div id="div1">closest-side</div>
    <div id="div2">closest-corner</div>
    <div id="div3">farthest-side</div>
    <div id="div4">farthest-corner</div>
</body>
</html>

页面效果如下图所示。

CSS 径向渐变的 size 参数

3. start-color 和 stop-color 参数

参数 start-color 用于定义径向渐变的 “开始颜色”，而参数 stop-color 用于定义径向渐变的 “结束颜色”。此外，径向渐变也可以接受一个 “值列表”，用于同时定义多种颜色的径向渐变。

示例 6：均匀分布的径向渐变

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 150px;
            background: radial-gradient(red, orange, yellow, green, blue);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

均匀分布的 CSS 径向渐变

分析：

默认情况下，径向渐变的颜色节点是均匀分布的，不过我们可以为每一种颜色添加百分比，从而使得各个颜色节点不均匀分布。

示例 7：不均匀分布的径向渐变

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 150px;
            line-height: 150px;
            margin-top: 10px;
            text-align: center;
            color: white;
        }
        .first { background: radial-gradient(red, green, blue); }
        .second { background: radial-gradient(red 5%, green 30%, blue 60%); }
    </style>
</head>
<body>
    <div class="first">颜色均匀分布</div>
    <div class="second">颜色不均匀分布</div>
</body>
</html>

页面效果如下图所示。

不均匀分布的 CSS 径向渐变

CSS 渐变的语法非常复杂，手写很容易出错。在实际开发中，我们可以使用一些在线工具（比如 “CSS Gradient Generator” 等）来辅助编写代码。