怎么在HTML里用CSS repeating-linear-gradient创建重复的条纹背景

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 是对这个周期做缩放——不是“设置条纹宽”，而是“缩放整个重复图案”。写错一个数字，整片背景就偏了。