repeating-linear-gradient() 创建条纹需颜色停靠点“紧邻重叠”（如 red 0, red 4px, blue 4px, blue 8px），否则出现过渡、模糊或错位；百分比更安全；方向与 background-size 逻辑易混淆；ie需降级为 linear-gradient + background-size；细条纹需注意 dpr 和容器尺寸。
直接用 repeating-linear-gradient() 就能创建条纹背景，但写错颜色停靠点顺序或数值，条纹会变成纯色、发虚、错位，甚至只显示一次。
repeating-linear-gradient 的颜色停靠点必须“紧邻重叠”
浏览器靠相邻两个停靠点值完全相等（比如 #000 10px 和 #fff 10px）来硬切颜色，不插值。一旦中间留空（#000 10px, #fff 11px）或错位（#000 10%, #fff 15%），就会出现过渡带，条纹变灰、变糊。
- ✅ 正确写法：
red 0, red 4px, blue 4px, blue 8px→ 红蓝各占 4px，周期 8px - ❌ 错误写法：
red 0, red 4px, blue 5px, blue 9px→ 中间多出 1px 过渡，边界模糊 - ⚠️ 百分比更安全：
red 0%, red 50%, blue 50%, blue 100%，适配缩放和高 DPR 屏幕
方向参数别和 background-size 直觉搞反
0deg 是从下往上（垂直条纹），90deg 是从左往右（水平条纹）；而 background-size: 8px 4px 的第一个值控制水平方向重复密度，第二个值控制垂直方向——它缩放的是整个重复单元，不是单个色带。
- 想做水平细条纹（红白横纹）：用
90deg+background-size: 20px 20px - 想做垂直密条纹：用
0deg+background-size: 4px 100%（宽度压缩，高度不限制） - Safari 对
90deg支持略差，生产环境建议改用to right或to bottom
IE10–11 不支持 repeating-linear-gradient，得降级
IE 只认 linear-gradient，但你可以手动构造一个单周期渐变，再靠 background-size 控制平铺密度，效果一致。
background: linear-gradient(to bottom, #e0e0e0 0%, #e0e0e0 10px, #ffffff 10px, #ffffff 20px); background-size: 20px 20px;
- 这个
linear-gradient本身只画一次 20px 高的双色块 -
background-size让它在 x/y 方向按 20px 间隔重复，视觉上就是条纹 - 注意 IE10+ 不支持 HSLA 中带空格写法，如
hsla(0, 0%, 0%, 0.5) 0%会失败，要写成hsla(0,0%,0%,0.5) 0%
条纹太细看不见？大概率是单位或渲染问题
2px 条纹在 DPR=2 的屏幕（比如 Retina）上可能被渲染为 1.5px，边缘发虚；或者容器 height 为 0，根本没空间画。
- 先加
min-height: 20px排查是否容器塌陷 - 优先用百分比定义停靠点（
0%, 50%, 50%, 100%），再用background-size控制物理尺寸 - 避免混用单位：不要
red 0%, blue 10px，统一用 % 或 px - Firefox 对 subpixel 渲染更敏感，Chrome 宽容些，多浏览器验证不能省
真正容易被忽略的是：repeating-linear-gradient 的周期长度由你写的最后一个停靠点决定，而 background-size 是对这个周期做缩放——不是“设置条纹宽”，而是“缩放整个重复图案”。写错一个数字，整片背景就偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
