线性渐变 (linear-gradient)

学习

线性渐变 (linear-gradient)

2026-02-23/0/ 编辑

线性渐变 (linear-gradient)

概念

线性渐变（Linear Gradient）是 CSS3 中创建渐变背景的强大工具，可以创建平滑过渡的颜色效果。

语法

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

基本语法

1. 基础方向

/* 从上到下（默认）*/
background-image: linear-gradient(red, blue);

/* 从左到右 */
background-image: linear-gradient(to right, red, blue);

/* 对角线 */
background-image: linear-gradient(to bottom right, red, blue);

/* 从下到上 */
background-image: linear-gradient(to top, red, blue);

/* 从右到左 */
background-image: linear-gradient(to left, red, blue);

2. 角度方向

/* 0deg = 从下到上 */
background-image: linear-gradient(0deg, red, blue);

/* 90deg = 从左到右 */
background-image: linear-gradient(90deg, red, blue);

/* 180deg = 从上到下 */
background-image: linear-gradient(180deg, red, blue);

/* 270deg = 从右到左 */
background-image: linear-gradient(270deg, red, blue);

/* 45deg = 对角线 */
background-image: linear-gradient(45deg, red, blue);

3. 多色渐变

/* 三色渐变 */
background-image: linear-gradient(to right, red, blue, yellow);

/* 四色渐变 */
background-image: linear-gradient(to right, red, blue, green, yellow);

/* 多色渐变 */
background-image: linear-gradient(
    to right,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #9400d3
);

颜色停止点（Color Stops）

语法

linear-gradient(direction, color1 stop1, color2 stop2, ...);

示例

/* 指定颜色停止点 */
background-image: linear-gradient(
    to right,
    red 0%,
    red 30%,
    blue 30%,
    blue 100%
);

/* 创建硬边效果 */
background-image: linear-gradient(
    to right,
    red 50%,
    blue 50%
);

/* 不均匀渐变 */
background-image: linear-gradient(
    to right,
    red 10%,
    yellow 60%,
    blue 90%
);

/* 重复颜色 */
background-image: linear-gradient(
    to right,
    red,
    red 20%,
    yellow 20%,
    yellow 40%,
    blue 40%,
    blue 100%
);

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线性渐变示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .box {
            width: 200px;
            height: 150px;
            margin: 20px;
            padding: 20px;
            border-radius: 8px;
            float: left;
            color: white;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

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

        .box2 {
            /* 从上到下 */
            background-image: linear-gradient(to bottom, red, blue);
        }

        .box3 {
            /* 对角线 */
            background-image: linear-gradient(to bottom right, red, blue);
        }

        .box4 {
            /* 45度角 */
            background-image: linear-gradient(45deg, red, blue);
        }

        .box5 {
            /* 三色渐变 */
            background-image: linear-gradient(to right, red, blue, yellow);
        }

        .box6 {
            /* 多色渐变 */
            background-image: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff);
        }

        .box7 {
            /* 颜色停止点 */
            background-image: linear-gradient(to right, red 0%, red 30%, blue 30%, blue 100%);
        }

        .box8 {
            /* 硬边 */
            background-image: linear-gradient(to right, red 50%, blue 50%);
        }

        .container::after {
            content: "";
            display: block;
            clear: both;
        }

        h3 {
            color: #333;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>线性渐变 (linear-gradient) 演示</h1>

    <h3>基础方向</h3>
    <div class="container">
        <div class="box box1">to right</div>
        <div class="box box2">to bottom</div>
        <div class="box box3">to bottom right</div>
        <div class="box box4">45deg</div>
    </div>

    <h3>多色渐变</h3>
    <div class="container">
        <div class="box box5">三色</div>
        <div class="box box6">彩虹色</div>
    </div>

    <h3>颜色停止点</h3>
    <div class="container">
        <div class="box box7">停止点</div>
        <div class="box box8">硬边</div>
    </div>
</body>
</html>

实际应用场景

场景 1：Hero 区域背景

.hero {
    height: 500px;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

场景 2：按钮渐变

.button {
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    color: white;
    background-image: linear-gradient(to right, #667eea, #764ba2);
    cursor: pointer;
    transition: opacity 0.3s;
}

.button:hover {
    opacity: 0.9;
}

场景 3：卡片背景

.card {
    padding: 20px;
    border-radius: 10px;
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

场景 4：进度条

.progress-bar {
    height: 20px;
    border-radius: 10px;
    background-image: linear-gradient(to right, #667eea, #764ba2);
    width: 75%;
}

场景 5：文字渐变

.gradient-text {
    font-size: 48px;
    font-weight: bold;
    background-image: linear-gradient(to right, #ff0000, #0000ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

场景 6：半透明渐变

.overlay {
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

重复线性渐变

语法

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

示例

/* 重复渐变 */
background-image: repeating-linear-gradient(
    45deg,
    red,
    red 10px,
    blue 10px,
    blue 20px
);

/* 斑马线效果 */
background-image: repeating-linear-gradient(
    to right,
    #333,
    #333 20px,
    #fff 20px,
    #fff 40px
);

/* 虚线效果 */
background-image: repeating-linear-gradient(
    to right,
    #667eea,
    #667eea 10px,
    transparent 10px,
    transparent 20px
);

高级技巧

1. 叠加渐变

/* 渐变 + 纯色 */
background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5)),
    linear-gradient(to bottom, red, blue);

2. 角度精确控制

/* 从特定角度开始 */
background-image: linear-gradient(135deg, red, blue);

/* 使用角度 + 关键字 */
background-image: linear-gradient(135deg to bottom right, red, blue);

3. 渐变动画

.animated-gradient {
    background-size: 200% 200%;
    background-image: linear-gradient(
        -45deg,
        #667eea,
        #764ba2,
        #667eea
    );
    animation: gradient-move 3s ease infinite;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

与其他属性配合

与 background-size 配合

.gradient-bg {
    background-image: linear-gradient(to right, red, blue);
    background-size: 200% 200%;
}

与简写属性配合

/* 完整简写 */
background: linear-gradient(to right, red, blue) no-repeat center center / cover;

多背景图

.multi-gradient {
    background:
        linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)),
        url(bg.jpg);
}

注意事项

  1. 浏览器兼容性：旧版浏览器需要 -webkit- 前缀
  2. 默认方向：不指定方向时，默认是从上到下
  3. 颜色停止点：可以使用百分比或像素值
  4. 透明度：支持 RGBA 和 HSLA 颜色
  5. 性能：复杂的渐变可能影响性能

浏览器兼容性

特性ChromeFirefoxSafariIE/Edge
linear-gradient✅ 10.0+ (26.0+)✅ 3.6+ (16.0+)✅ 5.1+ (6.1+)✅ 10.0+
repeating-linear-gradient✅ 10.0+ (26.0+)✅ 3.6+ (16.0+)✅ 5.1+ (6.1+)✅ 10.0+

常见问题

Q1: 如何创建彩虹渐变？

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

Q2: 如何创建硬边效果？

.hard-edge {
    background-image: linear-gradient(to right, red 50%, blue 50%);
}

Q3: 如何创建动画渐变？

.animated {
    background-size: 200% 200%;
    background-image: linear-gradient(to right, red, blue, red);
    animation: gradient-animation 3s ease infinite;
}

@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

最佳实践

/* ✅ 推荐：Hero 背景 */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ✅ 推荐：按钮渐变 */
.button {
    background: linear-gradient(to right, #667eea, #764ba2);
}

/* ✅ 推荐：卡片背景 */
.card {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* ✅ 推荐：文字渐变 */
.gradient-text {
    background: linear-gradient(to right, #ff0000, #0000ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ✅ 推荐：叠加渐变 */
.overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.7)
    );
}

创意示例

示例 1：霓虹效果

.neon {
    background: linear-gradient(
        to bottom,
        #ff0000,
        #ff7f00,
        #ffff00,
        #00ff00,
        #0000ff,
        #4b0082,
        #9400d3
    );
    background-size: 100% 400%;
    animation: neon 5s linear infinite;
}

@keyframes neon {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}

示例 2：玻璃态效果

.glass {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0)
    );
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

学习笔记：线性渐变是 CSS3 的强大特性，可以创建丰富的视觉效果，配合其他属性可以实现更多创意效果。

猜你喜欢