repeating-linear-gradient 和 repeating-radial-gradient 是唯二可用的 CSS 重复渐变函数，不支持用 linear-gradient 加 background-repeat 模拟——浏览器会忽略这种组合，因渐变属 <image> 类型，background-repeat 仅对 url() 等位图有效，设了也会被 DevTools 划掉。
直接说结论：repeating-linear-gradient 和 repeating-radial-gradient 是唯二可用的 CSS 重复渐变函数，不支持用 linear-gradient 加 background-repeat 模拟——浏览器会忽略这种组合。
为什么 background-repeat 对 linear-gradient 无效
CSS 渐变本质是 <image> 类型值，不是位图；background-repeat 只对真实图像或 url() 有效。当你写 background: linear-gradient(...); background-repeat: repeat;，后者会被静默丢弃。
- 验证方式：打开 DevTools → Elements → Styles 面板，能看到
background-repeat被划掉（strikethrough） - 常见误操作：把
repeating-linear-gradient写成linear-gradient后手动加repeat，结果背景只显示单次渐变就停了 - 真正起作用的是渐变函数内部的颜色停止点（color stop）间距——必须靠它控制重复周期
repeating-linear-gradient 的关键参数怎么设
重复线性渐变的节奏完全由颜色停止点之间的距离决定。比如 repeating-linear-gradient(to right, #ff0 0px, #ff0 10px, #f00 10px, #f00 20px) 表示“黄 10px + 红 10px”为一个循环单位。
- 必须至少有两个相邻 color stop 值相等（如
#ff0 10px, #f00 10px），否则浏览器无法识别“硬边”，会插值过渡，失去重复条纹感 - 方向关键词（
to right、45deg）和普通linear-gradient一致，但角度值更易控精度；to bottom默认是垂直重复，别漏写 - 起始偏移（第一个 stop 的位置）影响整体对齐：设
0px从左/上边缘开始；设5px则第一段黄条会从 5px 处才出现 - 别用百分比 stop 做重复条纹——元素宽度变化时，条纹宽高会缩放失真；固定单位（
px、em）更可靠
repeating-radial-gradient 怎么避免中心模糊或错位
重复径向渐变容易出问题的地方在圆心定位和尺寸单位。默认 repeating-radial-gradient(#ff0, #f00 20px) 会以元素中心为原点，画出一圈圈同心圆环，但若想做成“左上角发散的重复斑点”，就得显式指定位置。
立即学习“前端免费学习笔记（深入）”；
- 圆心必须用明确语法：
circle at top left或ellipse at 10px 15px；at top,left（带逗号）或at top left center（多关键字）都会失效 - 第二色 stop 值（如
#f00 20px）决定了单个环的半径；要让环之间无缝衔接，下一个循环起点得接上，例如#ff0 0px, #ff0 20px, #f00 20px, #f00 40px - 用
closest-side/farthest-corner这类关键字当 size 参数时，重复行为不可预测——建议统一用带单位的数值（20px、1em） - Firefox 对
repeating-radial-gradient的解析比 Chrome 更严格，少一个空格或单位都可能不渲染
兼容性和 fallback 必须手动处理
IE 完全不支持所有 repeating-xxx 函数；旧版 Safari（iOS 9 及更早）需要 -webkit-repeating-linear-gradient 前缀，但现代项目基本可忽略。真正要防的是“渐变没生效却看不出”的静默失败。
- 永远在 repeating 函数前加一层纯色 fallback：
background: #ccc; background-image: repeating-linear-gradient(...); - 不要依赖
background简写覆盖：写background: repeating-linear-gradient(...)会清空已设的background-color或background-size - 移动端 Android WebView 4.4–6.0 有 bug：当重复单元小于 2px 时，部分设备会渲染成实色块，建议最小 stop 间距设为
2px起 - 如果要用在文字上（比如渐变文字边框），
repeating-linear-gradient必须配合background-clip: text+-webkit-text-fill-color: transparent，且仅限 WebKit 内核生效
最常被忽略的一点：重复渐变不是“画一次再复制”，而是浏览器实时计算无限平铺——所以 color stop 的数值必须构成等差数列，断点一错，整个图案就崩。调试时放大 400%，盯着像素级对齐看，比查文档更快定位问题。
