repeating-linear-gradient 比 background-image 更灵活，因其无需切图、不依赖文件加载，颜色和尺寸均可通过 CSS 变量控制，全局响应；浏览器直接渲染，无 HTTP 请求与缓存问题，且本质是自动平铺的周期性渐变结构。
repeating-linear-gradient 为什么比 background-image 更灵活
因为不用切图、不依赖文件加载，所有颜色和尺寸都能用 CSS 变量控制，改一个值就能全局响应。浏览器直接渲染，没有额外 HTTP 请求，也不用担心 base64 编码长度限制或缓存失效问题。
关键区别在于：repeating-linear-gradient 是「自动平铺的渐变」，不是单次绘制后靠 background-repeat 复制——它从一开始就把整个背景定义为周期性结构。
最简条纹写法：水平/垂直等宽双色条纹
常见错误是直接套用 linear-gradient 写法，漏掉 repeating- 前缀，结果只画出一条带，其余全是默认背景色。
- 水平条纹（从上到下）：
background: repeating-linear-gradient(to bottom, #000 0px, #000 10px, #fff 10px, #fff 20px); - 垂直条纹（从左到右）：
background: repeating-linear-gradient(to right, #000 0px, #000 5px, #eee 5px, #eee 10px);
注意每个颜色至少要声明两次：一次是「开始位置」，一次是「结束位置」。中间不能跳过过渡点，否则浏览器会自动补全，导致条纹宽度失控。
立即学习“前端免费学习笔记（深入）”；
斜向条纹怎么写才不糊、不偏移
斜向条纹最容易踩的坑是角度和尺寸没对齐，出现模糊锯齿或视觉错位。核心原则：条纹周期必须能被 45° 的直角三角形边长整除。
- 45° 斜纹推荐用
45deg+ 基于sqrt(2)的尺寸，但更稳妥的是用to bottom right+ 偶数像素宽高比 - 实操建议：
background: repeating-linear-gradient(45deg, #333 0px, #333 8px, transparent 8px, transparent 16px); - 如果发现边缘发虚，加
background-size: 16px 16px;显式锁定重复单元，避免浏览器按容器尺寸缩放计算误差
多色、不等宽、带透明度的条纹怎么控制节奏
只要理解「色标位置 = 累计偏移量」，就能自由编排。比如三色不等宽条纹：#f00 0px, #f00 12px, #0f0 12px, #0f0 20px, #00f 20px, #00f 30px，就是红 12px → 绿 8px → 蓝 10px。
透明条纹常用在叠加场景，但要注意：半透明确实会叠出灰边，除非你有意做混合效果。更干净的做法是用 rgba(0,0,0,0.1) 替代 transparent，让底层内容可控地透出。
性能上，repeating-linear-gradient 在现代浏览器中基本无开销，但别在 :hover 动画里频繁切换多个复杂色标——重绘成本会上升，尤其在低功耗设备上。
真正难调的其实是响应式条纹：当容器宽高动态变化时，background-size 和色标单位混用（比如 px + %）容易失准。固定节奏建议全用 px 或 em，需要缩放就统一用 CSS 变量配合 calc()。
