repeating-linear-gradient是制作条纹背景最直接、可控的方案，它原生定义重复单元，避免linear-gradient+background-size因容器尺寸非整数倍导致的截断或拉伸，需确保色标硬接、background-size显式匹配周期总长。
repeating-linear-gradient 是制作条纹背景最直接、可控的方案，不是“用 linear-gradient 模拟重复”，而是浏览器原生支持的重复单元定义机制。它比手动写多层 linear-gradient 更简洁，也比拼接图片或 SVG 更轻量。
为什么不用普通 linear-gradient + background-size？
能用，但容易出错。核心问题在于：普通 linear-gradient 本身不声明“重复逻辑”，只画一个渐变片段；靠 background-size 强行缩放平铺时，若容器尺寸不能被周期整除，条纹会在边缘截断或拉伸变形。
- 比如
background: linear-gradient(to bottom, #000 50%, #fff 50%); background-size: 100% 20px;—— 看似每 20px 一循环，但若元素高 105px，最后一段只剩 5px，浏览器会拉伸这个片段补满，导致条纹高度不一致 -
repeating-linear-gradient明确告诉浏览器：“从 0 到 20px 是一个完整周期，无限平铺”，不依赖容器尺寸 - IE10+ 不支持
repeating-前缀？那就用降级写法：linear-gradient手动写出一个完整周期（如to bottom, #000 0, #000 10px, #fff 10px, #fff 20px），再配background-size: auto 20px
repeating-linear-gradient 的色标必须“硬接”
条纹边缘模糊？大概率是色标没对齐。相邻颜色的起止位置必须完全相等，否则浏览器会做插值过渡。
- ✅ 正确：
repeating-linear-gradient(to bottom, #2c3e50 0px, #2c3e50 4px, #34495e 4px, #34495e 8px)——4px处颜色从深灰硬切到浅灰 - ❌ 错误：
#2c3e50 0px, #2c3e50 3.9px, #34495e 4.1px, #34495e 8px—— 中间 0.2px 被平滑过渡，条纹发虚 - 别省略单位：用
px比%更直观，尤其当周期长度固定时（如 2px 线宽） - 方向值影响坐标系：
to bottom对应垂直方向周期长度，to right对应水平方向，45deg的周期需按 √2 放大（例如视觉间距 20px，实际设28px）
background-size 必须显式匹配周期总长
repeating-linear-gradient 只定义“一个格子长啥样”，不控制它怎么铺。漏掉 background-size，浏览器默认按元素尺寸拉伸整个渐变，条纹就没了。
立即学习“前端免费学习笔记（深入）”；
- 周期总长 = 最后一个色标值（如
0px, 4px, 4px, 8px→ 总长 8px） - 垂直条纹：
background-size: auto 8px（宽度自适应，高度 8px 一周期） - 水平条纹：
background-size: 8px auto - 斜向条纹：
background-size: 28px 28px（对应 45deg 下的视觉周期） - 避免继承污染：重置 CSS 或其他组件可能设置了
background-size: 100% 100%，务必显式覆盖
高 DPI 屏幕下 1px 条纹发虚怎么办？
这不是代码 bug，是渲染机制——Retina 屏默认启用抗锯齿，把物理 1px 渐变线柔化成视觉上的灰边。
- 最稳解法：把最小单位提到
2px，例如#000 0, #000 2px, transparent 2px, transparent 4px -
image-rendering: pixelated对渐变无效，别试 - 不要用
transform: scale(0.5)模拟像素，它会缩放整个元素内容 - 接受设计妥协：主流 UI 库（Ant Design、Element Plus）的斑马纹基本都从 2px 起步
真正难的不是写对一行 repeating-linear-gradient，而是确保它在嵌套布局、响应式断点、不同设备像素比下始终稳定输出——关键就在色标对齐、background-size 显式声明、以及对 1px 渲染边界的清醒认知。
