CSS重复渐变教程：repeating-linear-gradient技巧解析

CSS `repeating-linear-gradient()` 函数是创建无限平铺渐变背景的利器，尤其适用于条纹、虚线、点阵等效果。本文深入解析 `repeating-linear-gradient()` 的语法和重复机制，强调精确控制色标以避免模糊重复，并通过实例展示如何创建经典条纹、虚线点状图案以及复杂的几何纹理。同时，分享了结合透明度、`background-size` 等属性的技巧，以及多层渐变叠加、`background-attachment: fixed` 视差效果、动画和 CSS 变量等高级应用，旨在帮助开发者掌握这一强大的 CSS 函数，提升网页视觉表现力与代码可维护性，打造更具创意和动态的 Web 界面。

repeating-linear-gradient()通过定义重复单元实现无限平铺的渐变效果，如条纹、虚线、点阵等；结合多层渐变、动画、背景固定和CSS变量可创造复杂动态背景，提升视觉表现与可维护性。

repeating-linear-gradient()是CSS中一个非常强大的函数，它能让你定义一个线性渐变模式，然后这个模式会沿着指定方向无限重复，从而在不增加图片资源的情况下，为网页元素创造出各种独特的、富有节奏感的背景效果。它本质上就是把一个基础的线性渐变“平铺”开来，让你可以用纯CSS实现原本需要图片才能完成的复杂背景设计。

解决方案

要使用repeating-linear-gradient()，核心在于理解它如何定义一个“重复单元”。它的语法和linear-gradient()非常相似，但关键在于你设置的颜色停止点（color stops）会决定这个重复单元的长度。

一个基础的repeating-linear-gradient()看起来是这样的： background: repeating-linear-gradient(direction, color1 stop1, color2 stop2, ...);

这里的direction可以是角度（如45deg）或关键字（如to right）。而color1 stop1, color2 stop2等则是定义了渐变的颜色和它们在渐变线上的位置。

关键在于重复机制： repeating-linear-gradient()会取你定义的最后一个色标（或如果未明确定义，则为最后一个颜色在100%位置）到第一个色标（或0%位置）之间的渐变段，然后无限次地重复这个段。为了创建清晰的重复图案，比如条纹，你通常需要让颜色在某个点“突然”切换，而不是平滑过渡。

举个例子，创建一个简单的红蓝条纹：

.striped-background {
  background: repeating-linear-gradient(
    45deg,          /* 渐变方向为45度 */
    #ff6b6b,        /* 红色开始 */
    #ff6b6b 10px,   /* 红色持续到10px */
    #4ecdc4,        /* 蓝色从10px开始 */
    #4ecdc4 20px    /* 蓝色持续到20px */
  );
  width: 100%;
  height: 200px;
}

在这个例子中，#ff6b6b 10px和#4ecdc4 10px意味着在10px这个位置，颜色从红色瞬间切换到蓝色。然后#4ecdc4 20px定义了蓝色持续到20px。所以，一个完整的重复单元是20px，其中前10px是红色，后10px是蓝色。整个渐变会以45度角，每20px重复一次红蓝相间的条纹。我个人觉得，它最妙的地方就在于，你只需要定义好一个“单元格”，它就能帮你自动铺满，省去了很多图片切图的麻烦，而且是纯CSS，缩放起来也毫无压力。

使用repeating-linear-gradient()能做出哪些让人眼前一亮的背景效果？

repeating-linear-gradient()的魅力在于它的灵活性，能让你用最少的代码实现各种视觉效果。

1. 经典的条纹背景： 这是最基础也是最常用的场景。无论是水平、垂直还是斜向条纹，都能轻松实现。通过调整角度和色标长度，你可以控制条纹的粗细和方向。

/* 垂直条纹 */
.vertical-stripes {
  background: repeating-linear-gradient(to right, #f0f0f0, #f0f0f0 15px, #e0e0e0 15px, #e0e0e0 30px);
  height: 150px;
}

/* 细斜纹 */
.thin-diagonal-stripes {
  background: repeating-linear-gradient(135deg, #eee, #eee 3px, #ccc 3px, #ccc 6px);
  height: 150px;
}

2. 虚线或点状图案： 通过巧妙地结合透明色，你可以模拟出虚线、点阵甚至网格效果。这种方法比用图片做虚线更灵活，因为你可以随时调整虚线的间距和颜色。

/* 水平虚线 */
.dashed-line {
  background: repeating-linear-gradient(to right, transparent, transparent 10px, #aaa 10px, #aaa 12px);
  height: 50px;
}

/* 简单的点阵（需要多层渐变） */
.dot-pattern {
  background-color: #f8f8f8;
  background-image:
    repeating-linear-gradient(0deg, #ccc, #ccc 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, #ccc, #ccc 1px, transparent 1px, transparent 20px);
  background-size: 20px 20px; /* 控制点阵的密度 */
  height: 200px;
}

你看，通过两层渐变，我们就能在视觉上模拟出网格，是不是挺有意思的？

3. 几何图案和纹理： 这需要一点创意和对色标的精确控制。比如，可以创造出锯齿状、波浪线，甚至是某种编织纹理。

/* 锯齿边框效果 */
.sawtooth-edge {
  background: repeating-linear-gradient(-45deg, #fff, #fff 5px, #000 5px, #000 10px);
  height: 30px;
  width: 100%;
}

有时候，你会发现一些意想不到的颜色和角度组合能带来惊喜，这完全取决于你的想象力。

在使用repeating-linear-gradient()时，有哪些值得注意的技巧和常见误区？

虽然repeating-linear-gradient()功能强大，但在实际应用中，也有一些小细节和坑需要注意。

1. 色标的精确控制是关键，避免模糊重复：repeating-linear-gradient()的“重复”机制，很大程度上取决于你如何设置色标。一个常见的误区是像linear-gradient()一样只设置起点和终点颜色，而不明确定义重复单元的长度，例如background: repeating-linear-gradient(red, blue);。这样会导致一个从红到蓝的平滑渐变不断重复，通常不是你想要的效果。 技巧： 始终明确定义每个颜色在重复单元中的起止位置。例如，red 0px, red 10px, blue 10px, blue 20px清晰地定义了一个20px的重复单元，其中前10px是红色，后10px是蓝色，颜色在10px处瞬间切换。

2. 透明度的妙用，创造层次感： 结合rgba()或hsla()的透明度，可以创建出叠加、镂空或半透明的效果，让背景更有层次感。比如，制作一个半透明的网格叠加在图片上，或者制作一个渐变虚线。

.transparent-overlay {
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.1) 0,
    rgba(0,0,0,0.1) 5px,
    transparent 5px,
    transparent 10px
  );
  background-color: lightblue; /* 作为底层颜色 */
  height: 150px;
}

这种方式能让你的设计看起来更精致，不那么“死板”。

3. 与background-size结合，控制重复单元的实际大小： 虽然repeating-linear-gradient()本身会重复，但如果你想控制重复单元的实际大小，或者想让它在特定区域内重复，background-size属性就派上用场了。当你定义了一个小型的重复图案，但希望它在更大的区域内以特定尺寸平铺时，background-size能给你更精细的控制。

.custom-sized-pattern {
  background: repeating-linear-gradient(45deg, #f0f, #f0f 5px, #0ff 5px, #0ff 10px);
  background-size: 40px 40px; /* 将20px的重复单元放大到40px */
  height: 200px;
}

4. 性能考量： 纯CSS渐变通常比图片性能好，但在非常复杂的重复渐变中，浏览器渲染也需要计算。过度复杂的渐变层可能会影响性能，尤其是在旧设备上。我遇到过一些同事，为了追求极致的视觉效果，叠加了七八层渐变，结果在手机上就有点卡顿。所以，适度很重要，在追求美观的同时，也要兼顾用户体验。

除了基础用法，如何将repeating-linear-gradient()与其他CSS特性巧妙结合，创造更高级的视觉效果？

repeating-linear-gradient()本身已经很强大了，但当它与其他CSS属性“联姻”时，能迸发出更多令人惊叹的火花。

1. 多层渐变叠加，创造复杂图案： 这是最常见的进阶用法。通过在background属性中定义多个repeating-linear-gradient()，并用逗号分隔，你可以创建出极其复杂的图案。每一层渐变都可以有自己的角度、颜色、重复单元和背景位置。

.complex-pattern {
  background:
    repeating-linear-gradient(45deg, #f00 0, #f00 5px, transparent 5px, transparent 10px), /* 第一层：红色斜线 */
    repeating-linear-gradient(-45deg, #00f 0, #00f 5px, transparent 5px, transparent 10px), /* 第二层：蓝色斜线 */
    #eee; /* 底色 */
  background-size: 20px 20px; /* 控制所有渐变的重复单元大小 */
  height: 200px;
}

这种方式，我经常用来模拟一些材质纹理，比如布料的编织感，或者某种金属拉丝的效果。通过调整不同层渐变的透明度，还能做出更微妙的叠加效果。

2. 与background-attachment: fixed结合，实现视差背景： 当你的repeating-linear-gradient()作为背景，并且设置background-attachment: fixed;时，这个重复渐变会固定在视口中，而内容则在其上方滚动。这可以产生一种简单的视差效果，增加页面的深度感。

body {
  background: repeating-linear-gradient(45deg, #f9f9f9, #f9f9f9 10px, #e9e9e9 10px, #e9e9e9 20px);
  background-attachment: fixed; /* 背景固定 */
  /* 其他内容和高度以触发滚动 */
  min-height: 150vh;
}

3. 结合动画（@keyframes）和过渡（transition），让背景动起来： 虽然渐变本身是静态的，但你可以通过动画或过渡改变其background-position、background-size甚至渐变的颜色值，让重复渐变动起来，增加页面的交互性和趣味性。

@keyframes move-stripes {
  from { background-position: 0 0; }
  to { background-position: 200px 0; } /* 沿着X轴移动200px */
}

.animated-stripes {
  background: repeating-linear-gradient(90deg, #ffcc00, #ffcc00 20px, #ff6600 20px, #ff6600 40px);
  background-size: 40px 40px; /* 定义重复单元的大小 */
  animation: move-stripes 5s linear infinite; /* 5秒线性无限循环动画 */
  height: 100px;
}

这种动态效果，尤其是在加载动画或者某些交互反馈上，能带来非常棒的用户体验，让页面看起来更有活力。

4. 利用自定义属性（CSS Variables）增强可维护性和灵活性： 将重复渐变中的颜色、大小、角度等参数定义为CSS变量，可以更方便地管理和修改，尤其是在需要主题切换或响应式调整时，非常灵活。

:root {
  --stripe-color-a: #a0c4ff;
  --stripe-color-b: #bdb2ff;
  --stripe-width: 15px;
  --stripe-angle: 60deg;
}

.themable-stripes {
  background: repeating-linear-gradient(
    var(--stripe-angle),
    var(--stripe-color-a),
    var(--stripe-color-a) var(--stripe-width),
    var(--stripe-color-b),
    var(--stripe-color-b) calc(var(--stripe-width) * 2)
  );
  height: 150px;
}

/* 切换主题时，只需修改变量 */
@media (prefers-color-scheme: dark) {
  :root {
    --stripe-color-a: #3a0ca3;
    --stripe-color-b: #4361ee;
  }
}

这对于维护大型项目或者需要快速迭代设计稿的场景来说，简直是神器，大大提高了开发效率和代码的可读性。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~