CSS3 背景 - repeating-linear-gradient() 函数

核心知识点

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

学习目标

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

什么是 repeating-linear-gradient() 函数？

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

语法

repeating-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）
  • 位置：可选，可以是百分比或长度值，默认为均匀分布

工作原理

repeating-linear-gradient() 函数的工作原理与 linear-gradient() 类似，但它会在指定的颜色停止点范围内重复渐变模式。当最后一个颜色停止点的位置小于 100% 时，渐变会从该点开始重复，直到填满整个元素。

代码示例

示例 1：基本用法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>repeating-linear-gradient() 基本用法示例</title>
    <style>
        .box {
            width: 400px;
            height: 200px;
            border: 2px solid #333;
            margin: 20px;
            padding: 20px;
        }
        
        .gradient1 {
            /* 水平重复渐变 */
            background: repeating-linear-gradient(to right, red, yellow 20%);
        }
        
        .gradient2 {
            /* 垂直重复渐变 */
            background: repeating-linear-gradient(to bottom, red, yellow 20%);
        }
        
        .gradient3 {
            /* 45度角重复渐变 */
            background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
        }
        
        .gradient4 {
            /* 多颜色重复渐变 */
            background: repeating-linear-gradient(to right, red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
        }
    </style>
</head>
<body>
    <h1>repeating-linear-gradient() 基本用法示例</h1>
    
    <div class="box gradient1">
        <h2>水平重复渐变</h2>
        <p>background: repeating-linear-gradient(to right, red, yellow 20%);</p>
    </div>
    
    <div class="box gradient2">
        <h2>垂直重复渐变</h2>
        <p>background: repeating-linear-gradient(to bottom, red, yellow 20%);</p>
    </div>
    
    <div class="box gradient3">
        <h2>45度角重复渐变</h2>
        <p>background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);</p>
    </div>
    
    <div class="box gradient4">
        <h2>多颜色重复渐变</h2>
        <p>background: repeating-linear-gradient(to right, red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</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>repeating-linear-gradient() 条纹效果示例</title>
    <style>
        .box {
            width: 400px;
            height: 200px;
            border: 2px solid #333;
            margin: 20px;
            padding: 20px;
        }
        
        .stripe1 {
            /* 水平条纹 */
            background: repeating-linear-gradient(to right, #f0f0f0, #f0f0f0 20px, #e0e0e0 20px, #e0e0e0 40px);
        }
        
        .stripe2 {
            /* 垂直条纹 */
            background: repeating-linear-gradient(to bottom, #f0f0f0, #f0f0f0 20px, #e0e0e0 20px, #e0e0e0 40px);
        }
        
        .stripe3 {
            /* 斜条纹 */
            background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, #e0e0e0 10px, #e0e0e0 20px);
        }
        
        .stripe4 {
            /* 彩色条纹 */
            background: repeating-linear-gradient(to right, red 0px, red 20px, green 20px, green 40px, blue 40px, blue 60px);
        }
    </style>
</head>
<body>
    <h1>repeating-linear-gradient() 条纹效果示例</h1>
    
    <div class="box stripe1">
        <h2>水平条纹</h2>
        <p>background: repeating-linear-gradient(to right, #f0f0f0, #f0f0f0 20px, #e0e0e0 20px, #e0e0e0 40px);</p>
    </div>
    
    <div class="box stripe2">
        <h2>垂直条纹</h2>
        <p>background: repeating-linear-gradient(to bottom, #f0f0f0, #f0f0f0 20px, #e0e0e0 20px, #e0e0e0 40px);</p>
    </div>
    
    <div class="box stripe3">
        <h2>斜条纹</h2>
        <p>background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, #e0e0e0 10px, #e0e0e0 20px);</p>
    </div>
    
    <div class="box stripe4">
        <h2>彩色条纹</h2>
        <p>background: repeating-linear-gradient(to right, red 0px, red 20px, green 20px, green 40px, blue 40px, blue 60px);</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>repeating-linear-gradient() 网格效果示例</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            border: 2px solid #333;
            margin: 20px;
            padding: 20px;
        }
        
        .grid {
            /* 网格效果 */
            background: 
                repeating-linear-gradient(to right, #ddd, #ddd 1px, transparent 1px, transparent 20px),
                repeating-linear-gradient(to bottom, #ddd, #ddd 1px, transparent 1px, transparent 20px);
        }
        
        .grid-with-color {
            /* 彩色网格 */
            background: 
                repeating-linear-gradient(to right, #f0f0f0, #f0f0f0 1px, #e0e0e0 1px, #e0e0e0 20px),
                repeating-linear-gradient(to bottom, #f0f0f0, #f0f0f0 1px, #e0e0e0 1px, #e0e0e0 20px);
        }
    </style>
</head>
<body>
    <h1>repeating-linear-gradient() 网格效果示例</h1>
    
    <div class="box grid">
        <h2>网格效果</h2>
        <p>使用两个重复线性渐变创建网格</p>
    </div>
    
    <div class="box grid-with-color">
        <h2>彩色网格</h2>
        <p>使用两个重复线性渐变创建彩色网格</p>
    </div>
</body>
</html>

常见应用场景

1. 条纹背景

.striped {
    background: repeating-linear-gradient(to right, #f0f0f0, #f0f0f0 10px, #e0e0e0 10px, #e0e0e0 20px);
}

2. 进度条

.progress-bar {
    width: 100%;
    height: 20px;
    background: repeating-linear-gradient(45deg, #4CAF50, #4CAF50 10px, #45a049 10px, #45a049 20px);
    border-radius: 10px;
    animation: progress 2s linear infinite;
}

@keyframes progress {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 20px 0;
    }
}

3. 纹理背景

.texture {
    background: repeating-linear-gradient(60deg, #f5f7fa, #f5f7fa 10px, #c3cfe2 10px, #c3cfe2 20px);
}

4. 装饰性元素

.decorative {
    height: 10px;
    background: repeating-linear-gradient(to right, #ff6b6b, #ff6b6b 10px, #4ecdc4 10px, #4ecdc4 20px, #45b7d1 20px, #45b7d1 30px);
}

浏览器兼容性

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

最佳实践

  1. 使用具体的颜色停止点：为了获得精确的重复效果，建议明确指定每个颜色停止点的位置
  2. 使用长度值：对于需要固定间距的重复模式，使用长度值比百分比更精确
  3. 组合多个渐变：可以通过组合多个重复线性渐变创建复杂的图案
  4. 注意性能：复杂的重复渐变可能会影响性能，尤其是在移动设备上
  5. 使用渐变生成工具：对于复杂的重复渐变，可以使用在线工具生成代码

练习

  1. 创建一个水平的彩虹条纹背景
  2. 实现一个45度角的黑白相间条纹效果
  3. 设计一个使用重复线性渐变的进度条
  4. 创建一个复杂的网格图案，使用多个重复线性渐变
  5. 尝试使用不同的角度和颜色组合创建各种纹理效果

小结

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

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

« 上一篇 CSS3 背景 - radial-gradient() 函数 下一篇 » CSS3 背景 - repeating-radial-gradient() 函数
↑