repeating-linear-gradient实现斑马纹需色标硬接且周期匹配：相邻色标值必须相等（如#f0f0f0 0, #f0f0f0 10px, #ccc 10px, #ccc 20px），background-size须等于周期总长（如20px），单位统一用px，方向用to bottom/to right更兼容。
直接用 repeating-linear-gradient 就能画出干净的斑马纹，不需要额外元素或图片，但颜色停靠点（color stop）的位置必须算准，否则条纹会模糊、错位或完全消失。
为什么条纹总是模糊或看不见？
核心问题是渐变色停靠点没对齐——repeating-linear-gradient 会把第一个周期重复铺满整个区域，如果起始色和结束色之间没有明确的硬切（hard stop），浏览器就会做插值过渡，导致灰边或虚化。
- 错误写法：
repeating-linear-gradient(90deg, #f0f0f0, #ccc)→ 两个色停靠点没指定位置，浏览器默认按 0% 和 100% 分布，实际是平滑过渡，不是条纹 - 正确逻辑：至少定义三个停靠点，形成「实色→突变→实色」的节奏，比如
#f0f0f0 0%, #f0f0f0 50%, #ccc 50%, #ccc 100% - 更简写：利用重复特性，只写一个周期，如
repeating-linear-gradient(90deg, #f0f0f0 0, #f0f0f0 10px, #ccc 10px, #ccc 20px)，其中 10px 是单色条纹高度
如何控制条纹方向和宽度？
方向由角度决定，宽度由色停靠点间距决定，单位建议统一用 px 或 em，避免用百分比（因为重复单元基于自身周期，% 容易误算）。
- 横向条纹（默认）：
repeating-linear-gradient(0deg, ...)或省略角度（等价于to bottom） - 纵向条纹：
repeating-linear-gradient(90deg, ...)（等价于to right） - 斜向条纹（慎用）：
repeating-linear-gradient(45deg, ...)，此时条纹宽度 = 指定像素值 ÷ cos(45°) ≈ ×1.414，视觉上会变宽 - 调整疏密：改中间两个停靠点的差值，比如
#f0f0f0 0, #f0f0f0 4px, #ccc 4px, #ccc 8px→ 4px 宽条纹 + 4px 宽间隙
怎么和 background-color 或其他背景叠加？
repeating-linear-gradient 是 background-image 的一种，可以和 background-color 共存，但顺序和透明度很关键。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
background: #fff, repeating-linear-gradient(...);→background-color写在前，作为底层；渐变写在后，作为上层图案 - 如果渐变里用了半透明白色（如
rgba(255,255,255,0.8)），底色会透出来，可能改变视觉对比度 - 避免用
background: repeating-linear-gradient(...) #fff这种简写，CSS 会把 #fff 当成渐变的 color stop，不是背景色 - 想加阴影或纹理？得另起一层伪元素或 wrapper，gradient 本身不支持混合模式或滤镜直接叠加
最易忽略的是单位一致性与重复周期闭合——只要任意一个色停靠点没对齐（比如写了 10px 和 19px），整个重复单元就错位，条纹边缘发虚。动手前先用固定像素值写死一个周期，再整体缩放。
