用 linear-gradient 配合 background-size 是最可靠、最易维护的条纹方案，关键在色标对齐（如 #fb3 50%, #58a 50%）和单位选择（px 保密度、% 保缩放），避免 repeating-linear-gradient 的插值发虚与错位问题。
直接说结论：用 linear-gradient 配合 background-size 是最可靠、最易维护的方案，不需要 repeating-linear-gradient 也能做出干净条纹，关键在色标对齐和尺寸单位选择。
为什么不用 repeating-linear-gradient？
它理论上更“语义化”，但实际踩坑率高：色标稍有偏差（比如 #000 10px, #fff 11px）就会插值发虚；background-size 必须严格等于重复单元长度，否则错位；百分比色标 + 百分比 background-size 容易因容器缩放失准。而普通 linear-gradient 只要两个色标位置相等（如 #fb3 50%, #58a 50%），天然硬切，容错强。
linear-gradient 条纹的核心写法
本质是制造一个“无过渡”的双色渐变单元，再靠 background-size 控制其重复节奏：
- 水平条纹：
background: linear-gradient(#fb3 50%, #58a 50%); background-size: 100% 40px;→ 单元高度 40px，上下各 20px - 垂直条纹：
background: linear-gradient(to right, #fb3 50%, #58a 50%); background-size: 40px 100%;→ 单元宽度 40px - 不等宽条纹：
background: linear-gradient(#fb3 30%, #58a 30%); background-size: 100% 60px;→ 上 18px，下 42px - 省略第二个色标值：
background: linear-gradient(#fb3 30%, #58a 0);浏览器自动把0提升为前一个值（30%），效果等同上一条，更简洁
px vs %：什么时候该用哪个单位？
单位选错，自适应就失效：
- 固定视觉密度（如 UI 组件内嵌条纹）→ 用
px：background-size: 20px 20px，无论容器多宽，条纹粗细不变 - 需随容器等比缩放（如全屏背景）→ 用
%：background-size: 20% 20%，但必须配合linear-gradient的百分比色标（如50%, 50%），且注意：此时 20% 指的是容器宽/高的 20%，不是色标本身的百分比 - 绝对避免混用：
linear-gradient(... 50%, ... 50%)+background-size: 100px 20%会导致纵向拉伸变形
响应式条纹的隐藏陷阱
很多人加了 @media 调整 background-size 就以为完事了，但漏掉三点：
-
background-repeat必须显式写repeat，某些 reset CSS 会设成no-repeat，导致只显示一个单元 - 用
vh/vmin做background-size时，滚动中容器高度变化可能让条纹跳变，建议加will-change: background-size或改用 JS 监听 resize - 深色模式下，如果条纹色值没用
color-scheme: light dark或@media (prefers-color-scheme: dark)适配，对比度可能崩坏
真正难的不是写出第一行条纹，而是让不同设备、不同缩放、不同主题下，条纹始终对齐、不虚、不跳——这取决于你是否把 background-size 当作控制节奏的节拍器，而不是随便填的数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
