repeating-linear-gradient 颜色不重复是因为未显式定义周期长度；必须用绝对单位（如px）明确色标位置，使首尾对齐形成完整循环，且周期长度需与background-size一致，否则出现截断、错位或模糊。
repeating-linear-gradient 为什么颜色停不住、根本没重复？
因为没理解「重复单元」的长度逻辑：浏览器按你写的渐变色块总长度切片，不是按颜色数量。比如 repeating-linear-gradient(to right, red, blue)，默认从红到蓝占 100%，那整个渐变就只有一段——没空间让它重复。
实操必须显式控制单次循环长度：
- 写法要带长度单位，例如
repeating-linear-gradient(to right, red 0px, red 10px, blue 10px, blue 20px)，明确告诉浏览器「20px 是一个完整周期」 - 所有色标位置必须用绝对长度（
px、em等），不能混用百分比和长度，否则行为不可控 - 首尾色标位置必须严格对齐，比如
red 0px和red 20px才能形成无缝衔接；若写成red 0px, blue 15px, red 20px，最后 5px 就是空白或裁剪
怎么让 repeating-linear-gradient 和 background-size 配合好？
background-size 控制的是「单个重复图案块」的尺寸，不是整张背景图。很多人以为设 background-size: 40px 就能让渐变每 40px 重复一次，结果发现纹路错位——其实是渐变自身的周期长度和 background-size 没对齐。
关键原则：渐变周期长度必须等于 background-size 值，否则会出现缩放拉伸或截断：
立即学习“前端免费学习笔记（深入）”；
- 如果渐变定义为
repeating-linear-gradient(45deg, #000 0px, #000 2px, transparent 2px, transparent 4px)，那它的自然周期是 4px，background-size就得设成4px 4px - 若想放大到 20px 一格，两个办法：改渐变里的长度（全换成
0px/5px/5px/10px…），或直接用background-size: 20px 20px并确保渐变周期是 20px 的约数（比如周期设为 5px） - 注意：CSS 会先画满渐变周期，再按
background-size裁切平铺，所以周期 > background-size 会导致图案被硬切，边缘露白或色块突变
repeating-linear-gradient 在 Safari 里不生效或错位？
Safari（尤其 iOS 15–16）对 repeating-linear-gradient 的解析更严格，常见报错是 Invalid property value 或渲染成纯色，根源多在单位缺失或语法松散。
兼容性避坑点：
- 角度必须带单位，
45deg可以，45不行；方向关键词如to right没问题，但别混用（如to right 45deg是非法的） - 所有颜色停止点必须有明确位置，不允许
red, blue这种无位置写法；至少写成red 0%, blue 100%或带 px 的绝对定位 - 旧版 Safari 不支持多层渐变叠加时用
repeating-linear-gradient做其中一层，建议单独抽成 class，避免和其他linear-gradient写在同一background-image值里
用 repeating-linear-gradient 实现细线网格，为什么线太粗或模糊？
本质是像素对齐问题：CSS 渐变在非整像素边界渲染时会抗锯齿，细线（尤其是 1px）容易发虚、变灰、甚至消失。
真正有效的细线写法要卡死像素边界：
- 用
px单位，且起止位置严格对齐，例如画垂直线：repeating-linear-gradient(90deg, #000 0px, #000 1px, transparent 1px, transparent 2px) - 避免用
%或em定义 1px 级别的线，它们在缩放或字体变化时会失准 - 如果容器宽高不是偶数像素，或用了
transform: scale()，线会模糊——这时得配合image-rendering: pixelated或改用 SVG
渐变重复效果的精度，永远取决于你写的数字是否和设备像素对齐，而不是函数本身有多“智能”。
