本教程共 44 篇 · 第 19 篇 · 更新于 2026-07-29 · 约 10 分钟阅读

19. 渐变背景

本节目标：掌握 linear-gradient 和 radial-gradient 的用法，能用渐变实现各种视觉效果，减少图片依赖。

为什么要用渐变

CSS 渐变是浏览器生成的图像，不需要额外请求图片文件。用它做背景，既能减少加载时间，又能在放大时保持清晰。

线性渐变 —— linear-gradient

沿着一条直线，从一种颜色过渡到另一种颜色。

基本语法

background-image: linear-gradient(direction, color1, color2, ...);

从上到下（默认）

.gradient-basic {
    background-image: linear-gradient(red, yellow);
    /* 默认从上到下，红变黄 */
}

指定方向

/* 从左到右 */
.left-to-right {
    background-image: linear-gradient(to right, red, yellow);
}

/* 对角线：左上到右下 */
.diagonal {
    background-image: linear-gradient(to bottom right, red, yellow);
}

使用角度控制

.angle-gradient {
    background-image: linear-gradient(45deg, red, yellow);
}

角度规则：0deg 向上，90deg 向右，180deg 向下，270deg 向左。

多色渐变

/* 三色渐变 */
.three-colors {
    background-image: linear-gradient(red, yellow, green);
}

/* 彩虹色 */
.rainbow {
    background-image: linear-gradient(
        to right,
        red, orange, yellow, green, blue, indigo, violet
    );
}

指定颜色位置

默认颜色均匀分布，用百分比可以控制每种颜色的位置。

.striped {
    background-image: linear-gradient(
        to right,
        red 0%,
        red 33%,
        yellow 33%,
        yellow 66%,
        green 66%,
        green 100%
    );
}

相邻颜色的位置相同时，会形成清晰的分界线，而不是渐变过渡。

带透明度的渐变

.fade-out {
    background-image: linear-gradient(
        to right,
        rgba(255, 0, 0, 1),     /* 不透明红 */
        rgba(255, 0, 0, 0)      /* 完全透明 */
    );
}

重复线性渐变

.repeating {
    background-image: repeating-linear-gradient(
        45deg,
        #4CAF50,
        #4CAF50 10px,
        #81C784 10px,
        #81C784 20px
    );
}

径向渐变 —— radial-gradient

从中心点向外扩散的渐变效果。

基本语法

background-image: radial-gradient(shape size at position, color1, color2, ...);

默认效果

.radial-basic {
    background-image: radial-gradient(red, yellow, green);
    /* 从中心红，到黄色，到边缘绿色 */
}

设置形状

/* 圆形渐变 */
.circle {
    background-image: radial-gradient(circle, red, yellow);
}

/* 椭圆渐变（默认） */
.ellipse {
    background-image: radial-gradient(ellipse, red, yellow);
}

控制渐变大小

.radial-size {
    background-image: radial-gradient(
        closest-side at 30% 50%,
        red,
        yellow
    );
}

大小关键字：

closest-side：最近边
farthest-side：最远边
closest-corner：最近角
farthest-corner：最远角（默认）

指定中心位置

.off-center {
    background-image: radial-gradient(
        circle at 30% 70%,
        red,
        yellow
    );
}

重复径向渐变

.repeating-radial {
    background-image: repeating-radial-gradient(
        circle,
        #4CAF50,
        #4CAF50 10px,
        #81C784 10px,
        #81C784 20px
    );
}

实战：按钮渐变效果

<!DOCTYPE html>
<html lang="zh">
<head>
    <style>
        .btn-gradient {
            display: inline-block;
            padding: 14px 32px;
            border: none;
            border-radius: 25px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            /* 渐变背景 */
            background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            /* 文字阴影增加可读性 */
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
            /* 按钮阴影 */
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            transition: all 0.3s ease;
        }
        .btn-gradient:hover {
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <button class="btn-gradient">渐变按钮</button>
</body>
</html>

实战：条纹背景

.stripes {
    height: 200px;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.1) 10px,
        rgba(0, 0, 0, 0.1) 20px
    );
}

实战：聚光灯效果

.spotlight {
    background-image: radial-gradient(
        circle at 50% 30%,
        rgba(255, 255, 255, 0.3),
        transparent 60%
    );
}

渐变速查表

类型	语法	特点
线性渐变	`linear-gradient(方向, 颜色...)`	沿直线过渡
径向渐变	`radial-gradient(形状, 颜色...)`	从中心向外过渡
重复线性	`repeating-linear-gradient(...)`	循环平铺
重复径向	`repeating-radial-gradient(...)`	循环放射

小结

渐变是浏览器生成的，不需要图片请求
linear-gradient 沿直线过渡，用 to 方向或角度控制
radial-gradient 从中心向外扩散，可设为圆形或椭圆
多色渐变用逗号分隔颜色
repeating- 前缀让渐变重复平铺
rgba 可让渐变带透明效果