repeating-linear-gradient创建条纹背景需颜色停靠点紧邻重叠（如red 0, red 4px, blue 4px, blue 8px），周期为8px；须用百分比更安全，配合background-size显式匹配周期，否则条纹发虚、断裂或变纯色。

直接用 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 屏幕

direction 与 background-size 的配合逻辑容易搞反

0deg 是从下往上（垂直条纹），90deg 是从左往右（水平条纹）；而 background-size: 8px 4px 的第一个值控制水平方向重复密度，第二个值控制垂直方向——它缩放的是整个重复单元，不是单个色带。

• 想做水平细条纹（红白横纹）：用 to right 或 90deg + background-size: 20px 20px
• 想做垂直密条纹：用 to bottom 或 0deg + background-size: 4px 100%
• Safari 对 90deg 支持略差，生产环境建议改用 to right 或 to bottom

IE10–11 不支持，必须降级为 linear-gradient + background-size

IE 只认 linear-gradient，但你可以手动构造一个单周期渐变，再靠 background-size 控制平铺密度，效果一致。

立即学习“前端免费学习笔记（深入）”；

• ✅ 降级写法：background: linear-gradient(to bottom, #e0e0e0 0%, #e0e0e0 10px, #ffffff 10px, #ffffff 20px); background-size: auto 20px;
• ⚠️ 注意 IE10+ 不支持 HSLA 中带空格写法，如 hsla(0, 0%, 0%, 0.5) 0% 会失败，要写成 hsla(0,0%,0%,0.5) 0%
• 别漏掉 background-repeat: repeat，防止被 reset CSS 覆盖

条纹太细看不见？先排查容器和渲染问题

2px 条纹在 DPR=2 的屏幕（比如 Retina）上可能被渲染为 1.5px，边缘发虚；或者容器 height 为 0，根本没空间画。

• 先加 min-height: 20px 排查是否容器塌陷
• 细条纹优先用百分比定义停靠点（0%, 50%, 50%, 100%），再用 background-size 控制整体缩放
• 斜向条纹慎用 45deg，优先用 to right / to bottom + transform: rotate(45deg) 整体旋转容器（注意 overflow 和布局影响）

最易被忽略的是：background-size 必须显式声明且值等于重复单元总长，否则条纹会拉伸、断裂或消失——这不是可选项，是必要条件。