使用repeating-linear-gradient可创建重复条纹背景，语法为background: repeating-linear-gradient(方向, 颜色1 停止点1, 颜色2 停止点2, ...)；0deg生成水平条纹，如红白相间每20px：background: repeating-linear-gradient(0deg, red 0, red 20px, white 20px, white 40px)；90deg为垂直条纹，45deg为斜向条纹；通过增加颜色节点可实现多色效果，如彩虹条纹：background: repeating-linear-gradient(45deg, red 0, orange 10px, yellow 20px, green 30px, blue 40px, purple 50px)，合理设置停止点和角度即可灵活控制图案。
使用 repeating-linear-gradient 可以轻松创建重复的条纹图案，无需额外图片资源，适合背景装饰、斑马纹、加载动画等场景。它基于线性渐变，但会自动重复颜色过渡，直到填满整个容器。
基本语法
repeating-linear-gradient() 接收一个方向和多个颜色停止点（color stops），浏览器会自动将这些颜色段重复排列。格式：
background: repeating-linear-gradient(
direction,
color1 stop1,
color2 stop2,
...
);
创建水平条纹
通过设定颜色在特定位置切换，并控制间隔，可以生成等距条纹。
例如：创建红白相间的水平条纹，每条高20px：
background: repeating-linear-gradient( 0deg, red 0, red 20px, white 20px, white 40px );
说明：从0到20px为红色，20px到40px为白色，之后重复这一模式。
立即学习“前端免费学习笔记（深入）”；
创建垂直或斜向条纹
调整角度即可改变条纹方向。
- 90deg → 垂直条纹（从左到右）
- 45deg → 对角条纹
示例：垂直蓝白条纹，每条宽15px：
background: repeating-linear-gradient( 90deg, blue 0, blue 15px, white 15px, white 30px );
创建多色或渐变条纹
不限于两种颜色，可添加更多颜色节点实现多彩条纹。
比如彩虹条纹效果：
background: repeating-linear-gradient( 45deg, red 0, orange 10px, yellow 20px, green 30px, blue 40px, purple 50px );
每10px变换一次颜色，形成密集彩色条纹。
基本上就这些。合理设置颜色停点和方向，就能灵活实现各种条纹背景，不复杂但容易忽略细节。
