repeating-linear-gradient通过极短渐变单元无缝平铺实现条纹，关键在于颜色停止点须构成完整可重复片段；错误设置会导致断裂、留白或纯色；配合background-size可缩放整个重复单元。
repeating-linear-gradient 创建条纹背景的核心逻辑
直接说结论：repeating-linear-gradient 不是靠“画多条线”实现条纹，而是用一个**极短的渐变单元反复平铺**。它的关键在于：你写的颜色停止点必须构成一个完整、无间隙、可无缝重复的片段。写错停止位置（比如总长度不为 0 → 100%），就会出现色块断裂或意外留白。
参数顺序和颜色停止点怎么写才不出错
语法是 repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?, <color-stop> [, <color-stop> ]+ )</color-stop></color-stop></side-or-corner></angle>。重点在 <color-stop></color-stop> 列表——它必须至少含 2 个颜色停点，且首尾颜色停点的偏移值之差应能整除 100%（常见做法是让第一个停在 0%，最后一个停在 10px、20% 等明确长度单位或百分比，系统自动按此长度循环）。
-
repeating-linear-gradient(45deg, #fff 0%, #000 10%, #000 20%, #fff 20%)✅：黑白各占 10%，周期 20%，无缝 -
repeating-linear-gradient(45deg, #fff 0%, #000 10%, #000 15%, #fff 25%)❌：周期是 25%，但中间黑只占 5%，白占 10%+10%=20%，比例失衡，视觉上会偏白 - 用像素单位更直观：
repeating-linear-gradient(90deg, red 0, red 4px, blue 4px, blue 8px)→ 每 8px 一循环，红蓝等宽条纹
为什么有时条纹“消失”或变成纯色
常见于两个低级但难察觉的问题：
- 所有颜色停点都写成相同值，例如
red 0%, red 100%→ 渐变单元退化为单色，重复后还是纯色 - 用了不支持的语法，比如在旧版 Safari 中漏写
to bottom而只写角度（90deg），部分版本会降级为linear-gradient且不重复 → 条纹只出现一次就结束了 - 容器尺寸太小（如 height: 0 或被父元素 collapse），再好的渐变也渲染不出来；建议先加
min-height: 20px排查
和 background-size 配合使用的实际意义
repeating-linear-gradient 的循环周期由颜色停点隐式决定，但你可以用 background-size 显式缩放整个重复图案——这在响应式中很实用。例如：
background: repeating-linear-gradient(90deg, #eee 0, #eee 2px, #ddd 2px, #ddd 4px); background-size: 4px 4px;
这段代码本就以 4px 为周期，background-size 此时看似冗余；但若改成 background-size: 8px 8px，条纹就等比拉宽一倍；设为 2px 2px，则条纹变细且密度翻倍。注意：background-size 缩放的是整个重复单元，不是单个色带。
真正容易被忽略的是：当使用角度渐变（如 45deg）时，background-size 的两个值分别对应水平和垂直方向的缩放，不会自动适配斜向周期，此时条纹可能被拉伸变形——这种细节只有调到具体项目里才会暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
