linear-gradient条纹本质是硬切色标+background-size控制平铺；关键在色标对齐（如#000 50%,#fff 50%），禁用插值过渡，优先百分比单位，background-size定义渐变单元尺寸，须设repeat且容器需有明确宽高。
直接用 linear-gradient 做条纹背景，本质是“制造硬切 + 控制平铺”，不是真画条纹；它靠两个颜色在同一个位置收尾/起始，再用 background-size 把这个双色块缩成窄条并重复——写错色标或尺寸，条纹就变灰边、断裂或直接消失。
为什么 linear-gradient 写出的条纹容易发虚或变纯色
核心问题出在色标没对齐：浏览器看到 #000 50%, #fff 51% 这种写法，会自动插值渲染中间那 1%，结果就是灰蒙蒙的过渡带，不是硬边条纹。
- ✅ 正确写法：
#000 50%, #fff 50%—— 黑在 50% 结束，白在 50% 开始，硬切无过渡 - ⚠️ 魔法数字陷阱：写
#000 10px, #fff 10px看似直观，但 px 单位在高 DPR 屏幕上会被缩放，推荐优先用百分比（0%, 50%, 50%, 100%） - ❌ 别信“自动补全”：
#000 50%, #fff 0看起来省事，但部分旧浏览器会把0解释为“紧接前一个位置”，导致错位
background-size 怎么设才让条纹不拉伸、不截断
background-size 不是控制单个色带宽高，而是定义“整个渐变单元”的尺寸。漏设或设错，条纹就会被拉长、压扁，甚至只显示半条。
- 水平条纹（上下方向渐变）：
background-size: 100% 20px→ 宽度铺满，高度固定为 20px，每 20px 重复一次 - 垂直条纹（左右方向渐变）：
background-size: 12px 100%→ 高度铺满，宽度固定为 12px - 斜向条纹慎用：
background-size: 30px 30px是常见起点，但若发现边缘锯齿，加background-size: 28px 28px微调可缓解 - 必须显式声明：
background-repeat: repeat，防止被 reset CSS 覆盖导致只画一次
多色、不等宽条纹怎么写才不乱套
只要记住“每个色标位置 = 累计占比”，就能自由编排。比如红 20% → 蓝 30% → 黄 50%，对应色标就是：red 0%, red 20%, blue 20%, blue 50%, yellow 50%, yellow 100%。
立即学习“前端免费学习笔记（深入）”；
- 三色等宽（各占 33.3%）：
background: linear-gradient(to bottom, #f00 0%, #f00 33.3%, #0f0 33.3%, #0f0 66.6%, #00f 66.6%, #00f 100%) - 细红线 + 宽白底：
background: linear-gradient(to bottom, #f00 5%, #fff 5%)+background-size: 100% 10px - 透明叠加注意：用
rgba(0,0,0,0.1)比transparent更可控，避免底层内容混色出灰边
真正难的不是写对第一组色标，而是所有容器都要有明确高度/宽度——height: 0 或 min-height 缺失时，再准的渐变也渲染不出来。先加 outline: 1px solid red 确认盒子存在，再调背景。
