repeating-linear-gradient通过定义无缝重复的渐变单元实现条纹，关键在于相邻色标值完全相等、周期长度明确，且background-size必须显式匹配该周期，否则导致断裂、发虚或纯色。
repeating-linear-gradient 是实现条纹背景最直接、最可控的纯 CSS 方案，不需要图片、SVG 或 JS。它不是“画多条线”，而是定义一个可无缝重复的渐变单元，浏览器自动平铺——只要色标对齐、周期匹配，条纹就稳。
repeating-linear-gradient 色标必须首尾相接，否则条纹断裂或变纯色
常见错误是写错色标位置，导致浏览器无法识别重复单元。比如：
-
repeating-linear-gradient(to bottom, #000 0%, #000 10px, #fff 11px, #fff 20px)❌ —— 中间 1px 空隙被插值，条纹发虚甚至断开 -
repeating-linear-gradient(to bottom, #000 0%, #000 10px, #fff 10px, #fff 20px)✅ —— 黑在 10px 结束，白在 10px 开始，硬切无过渡 -
repeating-linear-gradient(90deg, red 0, red 2px, blue 2px, blue 4px)✅ —— 周期为 4px，单位统一用 px 更直观
关键原则：相邻色标值必须完全相等；最后一个色标值就是整个重复单元长度（如 4px），后续全按此长度平铺。
background-size 必须显式声明，且值要等于重复单元总长
repeating-linear-gradient 只定义“一个格子长啥样”，不控制它怎么铺。漏掉 background-size，条纹会随容器拉伸变形；设错值，就会错位、截断或看不见。
立即学习“前端免费学习笔记（深入）”；
- 若渐变写的是
red 0, red 2px, transparent 2px, transparent 4px，则background-size必须是auto 4px（竖条纹）或4px auto（横条纹） - 用百分比色标（如
0%, 25%, 25%, 50%）时，background-size: 20px 20px表示把 50% 映射为 20px，整单元缩放，不是单个色带缩放 - 别依赖 reset CSS 默认值，显式写
background-repeat: repeat，防止被覆盖
斜向条纹慎用 45deg，优先用 to right / to bottom + background-size 微调
直接写 45deg 容易在边缘出现锯齿或周期错乱，尤其高 DPR 屏幕上。真要斜纹，更稳的做法是：
- 先用
to right或to bottom写出清晰硬边条纹，再用transform: rotate(45deg)整体旋转容器（注意 overflow 和布局影响） - 若坚持用角度，周期长度得按 √2 倍估算（如直角周期 4px，斜向建议设
background-size: 6px 6px） - Safari 对
90deg兼容性略差，横向条纹推荐to right，纵向用to bottom，避免角度语法歧义
用 CSS 变量动态控制条纹尺寸时，calc() 和单位缺一不可
想响应式切换条纹粗细？变量必须带单位，且所有参与运算的地方都得包 calc()：
- 错误：
--stripe-unit: 4;（没单位）、red var(--stripe-unit)px（非法语法） - 正确：
--stripe-unit: 4px;，然后在渐变里写red 0, red calc(var(--stripe-unit) * 1), transparent calc(var(--stripe-unit) * 1) -
background-size也要同步：calc(var(--stripe-unit) * 2) calc(var(--stripe-unit) * 2) - 媒体查询中改变量，记得作用域匹配——如果变量定义在
.card内，@media里就得也写在.card下，不能只写:root
最易忽略的一点：repeating-linear-gradient 的色标单位（px/%）和 background-size 单位必须逻辑一致；混用会导致周期失配，条纹在不同设备上表现不一。
