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 必须显式声明且值等于重复单元总长，否则条纹会拉伸、断裂或消失——这不是可选项，是必要条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
