repeating-gradient 是 CSS 中自动平铺基础渐变的函数，需用相对单位或显式周期长度（如20px）定义单次重复；等宽双色条纹须颜色停靠点紧邻重叠（如#fff 10px, #000 10px），配合 background-size 可解耦控制密度与缩放。
repeating-gradient 语法和基本写法
repeating-gradient 是 CSS 渐变函数之一，本质是让一段基础渐变自动平铺重复，不用手动写多段 linear-gradient 拼接。它和 linear-gradient 用法高度相似，但关键区别在于：你只需定义「一个周期内」的颜色停靠点，浏览器会自动计算重复间距。
常见错误是照搬 linear-gradient 的写法，把颜色停靠点设成绝对长度（比如 0%, 20px, 40px），结果条纹宽窄失控。正确做法是用相对单位或明确周期长度：
- 使用百分比时，整个声明默认按「单次重复的总长度」归一化（即 100% = 一个条纹周期）
- 更稳妥的是显式指定周期长度，比如
repeating-linear-gradient(90deg, #000 0, #000 10px, transparent 10px, transparent 20px)—— 这里20px就是完整周期宽度
注意：repeating-radial-gradient 同理，但径向重复对齐更难控，条纹场景几乎只用线性版本。
实现等宽双色条纹的典型模式
最常用需求：黑白/灰白等宽条纹，类似斑马线。核心是让两种颜色各占一半周期，且边界硬切（无过渡）：
立即学习“前端免费学习笔记（深入）”；
- 颜色停靠点必须「紧邻重叠」，比如
#fff 0, #fff 50%, #000 50%, #000 100% - 或用像素写法更直观：
#fff 0, #fff 10px, #000 10px, #000 20px
background: repeating-linear-gradient( 90deg, #fff 0, #fff 10px, #000 10px, #000 20px );
要点：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
90deg 表示水平条纹（从左到右），0deg 才是垂直条纹（从上到下）
- 第二、三停靠点数值相同（如 10px），才能实现硬边切换；如果写成 #fff 10px, #000 11px，中间会多出 1px 过渡带
- 周期总长由最后一项决定（这里是 20px），所有后续重复都按此缩放
调整条纹方向、密度和兼容性
条纹密度直接由周期长度控制：数值越小，条纹越密。但要注意实际渲染效果受元素尺寸和缩放影响：
- 在高 DPI 屏幕上，
1px条纹可能被模糊或跳过，建议最小用2px -
repeating-gradient在 Safari 15.4+ 和 Chrome 10+ 支持良好，但旧版 iOS Safari 对负角度或复杂色标支持不稳定
常见调整方式：
- 垂直条纹：把90deg 换成 0deg，或直接写 to bottom
- 斜向条纹：用 45deg，但需注意斜向周期在矩形容器中会因宽高比产生错位，此时建议用 background-size 显式约束平铺单元，例如 background-size: 20px 20px
- 半透明叠加：在颜色值中使用 rgba() 或十六进制带 alpha（如 #0008），但 IE 完全不支持，Edge 17+ 才开始支持带透明度的渐变
与 background-size 配合控制整体节奏
repeating-gradient 本身定义的是「单个渐变图像」的内部结构，而 background-size 决定这个图像如何平铺到元素上。两者配合能解耦设计：
- 如果只改条纹宽窄，优先调渐变里的像素值（如
10px/20px→5px/10px） - 如果想保持条纹比例不变，但整体缩放（比如响应式中随容器变大而变粗），就用
background-size: 20px 20px控制平铺块大小，渐变内部仍写0%, 50%, 50%, 100%
容易忽略的一点：
- 当同时设置background-image（含 repeating-gradient）和 background-size 时，后者仅作用于该层渐变，不影响其他背景图层
- 若渐变作为多层背景之一（比如叠加在图片上），记得用逗号分隔，并确保 background-size 的值数量与图层数匹配，否则会 fallback 到默认行为
条纹类设计看着简单，但像素级对齐、跨设备清晰度、多层背景缩放一致性，这几个地方最容易在上线后才发现问题。
