CSS3 背景 - linear-gradient() 函数

核心知识点

linear-gradient() 函数的基本语法和作用
不同类型的取值方式（方向、颜色停止点）
与 background 属性的配合使用
浏览器兼容性和最佳实践

学习目标

掌握 linear-gradient() 函数的完整语法
能够使用不同的方向值创建线性渐变
理解颜色停止点的设置方法和作用
学会创建各种复杂的线性渐变效果
了解线性渐变的常见应用场景和解决方案

什么是 linear-gradient() 函数？

linear-gradient() 函数用于创建线性渐变背景，它可以生成从一个颜色到另一个颜色的平滑过渡效果。

语法

linear-gradient([方向], [颜色停止点1], [颜色停止点2], ...);

取值方式

1. 方向

取值方式	描述	示例
关键字	使用预定义的方向关键字	`to right`
角度值	使用角度指定方向	`45deg`

方向关键字

关键字	描述
`to top`	从下到上
`to right`	从左到右
`to bottom`	从上到下（默认值）
`to left`	从右到左
`to top right`	从左下到右上
`to top left`	从右下到左上
`to bottom right`	从左上到右下
`to bottom left`	从右上到左下

角度值

0deg：从下到上
90deg：从左到右
180deg：从上到下
270deg：从右到左

2. 颜色停止点

颜色停止点由颜色值和可选的位置组成：

color [位置];

颜色值：可以是任何有效的 CSS 颜色值（十六进制、RGB、RGBA、HSL、HSLA）
位置：可选，可以是百分比或长度值，默认为均匀分布

代码示例

示例 1：基本用法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>linear-gradient() 基本用法示例</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 2px solid #333;
            margin: 20px;
            padding: 20px;
        }
        
        .gradient1 {
            /* 从左到右，蓝色到红色 */
            background: linear-gradient(to right, blue, red);
        }
        
        .gradient2 {
            /* 从上到下，绿色到黄色（默认方向） */
            background: linear-gradient(green, yellow);
        }
        
        .gradient3 {
            /* 45度角，紫色到橙色 */
            background: linear-gradient(45deg, purple, orange);
        }
        
        .gradient4 {
            /* 从左上到右下，青色到粉色 */
            background: linear-gradient(to bottom right, cyan, pink);
        }
    </style>
</head>
<body>
    <h1>linear-gradient() 基本用法示例</h1>
    
    <div class="box gradient1">
        <h2>从左到右，蓝色到红色</h2>
        <p>background: linear-gradient(to right, blue, red);</p>
    </div>
    
    <div class="box gradient2">
        <h2>从上到下，绿色到黄色（默认方向）</h2>
        <p>background: linear-gradient(green, yellow);</p>
    </div>
    
    <div class="box gradient3">
        <h2>45度角，紫色到橙色</h2>
        <p>background: linear-gradient(45deg, purple, orange);</p>
    </div>
    
    <div class="box gradient4">
        <h2>从左上到右下，青色到粉色</h2>
        <p>background: linear-gradient(to bottom right, cyan, pink);</p>
    </div>
</body>
</html>

示例 2：多颜色停止点

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>linear-gradient() 多颜色停止点示例</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 2px solid #333;
            margin: 20px;
            padding: 20px;
        }
        
        .gradient1 {
            /* 三颜色渐变，均匀分布 */
            background: linear-gradient(red, green, blue);
        }
        
        .gradient2 {
            /* 三颜色渐变，指定位置 */
            background: linear-gradient(red 0%, green 50%, blue 100%);
        }
        
        .gradient3 {
            /* 四颜色渐变，自定义位置 */
            background: linear-gradient(red 0%, yellow 25%, green 75%, blue 100%);
        }
        
        .gradient4 {
            /* 颜色停止点重叠，创建硬边界 */
            background: linear-gradient(red 0%, red 50%, blue 50%, blue 100%);
        }
    </style>
</head>
<body>
    <h1>linear-gradient() 多颜色停止点示例</h1>
    
    <div class="box gradient1">
        <h2>三颜色渐变，均匀分布</h2>
        <p>background: linear-gradient(red, green, blue);</p>
    </div>
    
    <div class="box gradient2">
        <h2>三颜色渐变，指定位置</h2>
        <p>background: linear-gradient(red 0%, green 50%, blue 100%);</p>
    </div>
    
    <div class="box gradient3">
        <h2>四颜色渐变，自定义位置</h2>
        <p>background: linear-gradient(red 0%, yellow 25%, green 75%, blue 100%);</p>
    </div>
    
    <div class="box gradient4">
        <h2>颜色停止点重叠，创建硬边界</h2>
        <p>background: linear-gradient(red 0%, red 50%, blue 50%, blue 100%);</p>
    </div>
</body>
</html>

示例 3：透明度渐变

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>linear-gradient() 透明度渐变示例</title>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            border: 2px solid #333;
            margin: 20px;
        }
        
        .image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 150px;
            /* 从透明到黑色的渐变 */
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
            display: flex;
            align-items: flex-end;
            padding: 20px;
            color: white;
        }
    </style>
</head>
<body>
    <h1>linear-gradient() 透明度渐变示例</h1>
    
    <div class="container">
        <img src="https://via.placeholder.com/300x200" alt="示例图片" class="image">
        <div class="overlay">
            <div>
                <h2>图片标题</h2>
                <p>这是一个带有渐变叠加层的图片</p>
            </div>
        </div>
    </div>
</body>
</html>

常见应用场景

1. 按钮渐变效果

.button {
    padding: 10px 20px;
    background: linear-gradient(to right, #4CAF50, #45a049);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    background: linear-gradient(to right, #45a049, #3d8b40);
}

2. 卡片背景

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

3. 文本渐变

.text-gradient {
    background: linear-gradient(to right, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

4. 进度条

.progress-bar {
    width: 100%;
    height: 20px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
}

.progress {
    height: 100%;
    background: linear-gradient(to right, #4CAF50, #45a049);
    border-radius: 10px;
    transition: width 0.3s ease;
}

浏览器兼容性

浏览器	支持情况
Chrome	✅
Firefox	✅
Safari	✅
Edge	✅
IE 10+	✅

最佳实践

使用方向关键字：对于简单的方向，使用关键字更直观
使用角度值：对于复杂的方向，使用角度值更精确
指定颜色停止点位置：明确指定位置可以更好地控制渐变效果
使用透明度：结合 rgba() 或 hsla() 创建半透明渐变效果
注意性能：复杂的渐变可能会影响性能，尤其是在移动设备上
使用渐变生成工具：对于复杂的渐变，可以使用在线工具生成代码

练习

创建一个从左到右的彩虹渐变效果
实现一个带有透明度的渐变叠加层
设计一个使用渐变的按钮，包含悬停效果
创建一个带有渐变背景的卡片设计
尝试使用角度值创建一个对角线渐变效果

小结

linear-gradient() 函数是创建线性渐变背景的强大工具，通过灵活使用不同的方向值和颜色停止点，你可以实现各种复杂的渐变效果。结合其他 CSS 属性，你可以创建出更加丰富的视觉效果。

记住，在实际应用中，渐变效果应该与整体设计风格相协调，避免过度使用导致视觉疲劳。