用 linear-gradient() 色标重合（如 #fb3 50%, #58a 50%）配合 background-size 可生成纯色条纹，本质是两块实色拼接；多色条纹需显式定义各色块起止位置，斜纹推荐使用 repeating-linear-gradient。
直接用 linear-gradient() 的色标重合 + background-size 就能生成条纹，不需要图片、伪元素或额外 DOM。
色标重合是条纹生成的核心机制
浏览器对多个同位置色标的处理规则是关键：当两个色标位置值相等（如 #fb3 50% 和 #58a 50%），它们之间会形成一个“无限窄的过渡区”，视觉上就是颜色突变——也就是纯色分界线。
- 这本质不是渐变，而是两块实色拼接：上半部分全为
#fb3，下半部分全为#58a - 如果写成
linear-gradient(#fb3 30%, #58a 30%)，效果一样，但更易读；写成linear-gradient(#fb3 30%, #58a 0)更 DRY，因为规范规定后一个色标位置若小于前一个，会被自动设为前一个的值 - 错误写法：
linear-gradient(#fb3, #58a)会产生平滑过渡，不是条纹
background-size 控制条纹宽高与重复节奏
渐变在 CSS 中属于图像类型，background-size 决定单个“渐变单元”的尺寸，而默认 background-repeat: repeat 会让它铺满整个容器。
- 水平条纹：用
background-size: 100% 20px→ 单元高度 20px，其中 10px 是#fb3，10px 是#58a - 垂直条纹：改方向 + 调尺寸：
linear-gradient(to right, #fb3 50%, #58a 0)配background-size: 20px 100% - 常见坑：
background-size: 20px 20px用在垂直渐变上，会导致条纹错位或断裂，因为高度没撑满容器
多色条纹必须手动平衡色标位置
三色及以上条纹不能只靠两个色标，必须显式定义每个色块的起止边界，否则中间会出现意外渐变或空白。
- 正确写法（三色等宽）：
linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, #79b 0)—— 每个色标后紧跟下一个颜色的起始点，且后一个色标位置设为0以复用前值 - 错误写法：
linear-gradient(#fb3, #58a, #79b)或linear-gradient(#fb3 33%, #58a 33%, #79b 66%)，后者中间 33%~66% 区域会渐变而非硬切 - 注意单位精度：33.333% 比 33% 更可靠，尤其在小尺寸容器中，避免因四舍五入导致缝隙
斜向条纹优先用 repeating-linear-gradient
用普通 linear-gradient + background-size 做 45° 斜纹极其容易露白边或错位，因为单元尺寸和角度不匹配。
- 推荐方案：
repeating-linear-gradient(45deg, #fb3, #fb3 10px, #58a 0, #58a 20px)—— 明确指定每段长度，浏览器自动无缝循环 - 关键点：
#fb3 10px表示第一色块宽 10px，#58a 0表示第二色块从同一位置开始，#58a 20px表示该色块总长 20px（即含 10px 重叠） - 别漏掉
repeating-前缀，否则只画一次渐变，不会平铺
最易被忽略的是色标位置的隐式重置规则——0 不是“从头开始”，而是“取前一个色标的位置”，这个细节决定了代码是否真正可维护。写多色条纹时，宁可多写一行 0，也不要依赖百分比估算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
