📚 课程目录第4章条纹实战

4、条纹实战：水平条纹、垂直条纹、斜向条纹的CSS实现与参数调优

条纹这东西，看着简单，写起来全是坑。

我记得刚带团队那会儿，有个新人花了一整天调一个斜向条纹背景，最后发现是background-size少写了一个值。嗯，这种事儿我也干过。今天咱们就把水平、垂直、斜向三种条纹挨个捋一遍，参数怎么调、坑在哪儿，一次性说清楚。

核心要点：所有CSS条纹的本质都是「线性渐变 + 硬色标 + 尺寸控制」。你只要掌握了这个公式，剩下的就是调参数。

4.1 水平条纹：最基础，也最容易翻车

水平条纹说白了就是从上到下的颜色交替。用linear-gradient把色标位置设成一样，颜色就「硬切」了。

/* 最简单的水平条纹：蓝白交替，每段20px */
.horizontal-stripe {
  width: 400px;
  height: 200px;
  background: linear-gradient(
    #3498db 0px,
    #3498db 20px,
    #ffffff 20px,
    #ffffff 40px
  );
  background-size: 100% 40px;
}

这里有个关键点——background-size的第二个值决定了条纹的「周期」。40px就是一个蓝条加一个白条的总高度。如果你只写background-size: 100%，浏览器会默认第二个值是auto，结果就是条纹不重复，直接铺满。

我曾经踩过的坑：给background-size只写了一个值，结果条纹死活不重复。排查了半天，发现是简写漏了。记住，background-size两个值都得写，除非你明确知道auto的效果。

调优参数其实就三个：

色标位置：控制每条条纹的宽度。比如#3498db 0px, #3498db 10px就是10px的蓝条。
周期长度：background-size的第二个值。周期 = 蓝条高度 + 白条高度。
颜色数量：可以加更多颜色做多色条纹，但色标对数量必须是偶数。

参数	作用	常见错误
`色标位置`	定义颜色切换点	位置值写反（如40px在前，20px在后）
`background-size`	控制重复周期	只写一个值导致不重复
`background-repeat`	是否平铺	默认repeat，但有时会被全局样式覆盖

4.2 垂直条纹：把方向转个90度

垂直条纹和水平条纹的区别就一个——渐变方向。水平条纹是to bottom（默认），垂直条纹是to right。

/* 垂直条纹：红白交替，每段15px */
.vertical-stripe {
  width: 400px;
  height: 200px;
  background: linear-gradient(
    to right,
    #e74c3c 0px,
    #e74c3c 15px,
    #ffffff 15px,
    #ffffff 30px
  );
  background-size: 30px 100%;
}

注意看，background-size的第一个值变成了周期宽度，第二个值是100%。说白了就是把水平和垂直的参数对调了一下。

我个人习惯把水平和垂直条纹的代码放在一起对比着写，这样不容易搞混方向。你想想看，如果background-size写成了100% 30px，那就是水平条纹；写成了30px 100%，就是垂直条纹。方向完全由尺寸参数决定。

小技巧：如果你想要不等宽的条纹，比如宽蓝条+窄白条，只需要调整色标位置就行。比如蓝条30px、白条10px，周期就是40px。

4.3 斜向条纹：45度角的艺术

斜向条纹是实战中最常用的，也是最容易出问题的。方向用角度值控制，比如45deg、-45deg。

/* 斜向条纹：45度，绿白交替 */
.diagonal-stripe {
  width: 400px;
  height: 200px;
  background: linear-gradient(
    45deg,
    #2ecc71 0px,
    #2ecc71 20px,
    #ffffff 20px,
    #ffffff 40px
  );
  background-size: 56px 56px;
}

这里有个大坑——background-size的值怎么算？

对于45度斜条纹，周期长度不是简单的颜色宽度相加，而是需要乘以√2（约1.414）。比如颜色段是20px+20px=40px，那background-size应该是40px × 1.414 ≈ 56px。为什么？因为斜向条纹的重复单元是菱形，不是矩形。

我曾经踩过的坑：第一次写斜向条纹时，直接用了40px作为尺寸，结果条纹接缝处出现了明显的断裂。后来才明白，45度斜条纹的周期必须用勾股定理算。这个坑我至少见过5个同事踩过。

不同角度的尺寸计算公式：

角度	尺寸系数	示例（周期40px）
30deg	1 / cos(30°) ≈ 1.155	46px
45deg	√2 ≈ 1.414	56px
60deg	1 / cos(60°) = 2	80px

其实你不用每次都手动算。我一般直接用calc()或者预处理器变量，比如：

background-size: calc(40px * 1.414) calc(40px * 1.414);

4.4 三种条纹的知识结构

下面这张图把三种条纹的核心逻辑串起来了。你看一遍就能明白它们之间的转换关系。

4.5 参数调优的实战经验

说几个我实际项目中总结出来的调优原则：

条纹宽度别太细：低于2px的条纹在低分辨率屏幕上会糊成一片。我一般控制在4px以上。
颜色对比要够：浅灰+白这种组合，肉眼几乎看不出条纹。用色差大的颜色对。
斜向条纹慎用大角度：60度以上的斜条纹，视觉上容易产生眩晕感。45度是最稳的。
移动端注意性能：条纹本质是渐变，大量使用会触发重绘。如果页面有滚动动画，建议用伪元素代替背景。

我个人习惯：写条纹之前先画个草图，标清楚颜色段宽度和周期长度。这样写代码时基本一次过，不用反复调。你试试看，能省不少时间。

4.6 避坑指南

最后汇总一下我踩过的坑，你遇到了直接对照排查：

条纹不重复：检查background-size是否写了两个值，以及background-repeat是否被覆盖。
条纹接缝断裂：斜向条纹的尺寸没算对，用周期 × 系数重新算。
条纹方向不对：水平/垂直搞混了？看background-size的第一个值是宽度还是高度。
条纹模糊：色标位置用了小数（比如20.5px），浏览器渲染时会产生锯齿。尽量用整数。
条纹颜色不对：色标对数量必须是偶数，否则最后一个颜色会无限延伸。

嗯，条纹这块儿其实不难，就是细节多。你把上面这些记住了，写起来基本不会出问题。