📚 课程目录第3章条纹（Stripe）基础

3. 条纹（Stripe）基础：线性渐变与重复线性渐变

条纹这东西，看着简单，做起来全是坑。我最早做标注工具时，觉得不就是画几条线嘛，结果被设计师追着改了三个版本。嗯，今天咱们就把条纹的数学原理和 CSS 实现彻底聊透。

3.1 线性渐变：条纹的起点

CSS 里的 linear-gradient，说白了就是从一个颜色过渡到另一个颜色。但条纹不是过渡，是突变。怎么突变？把过渡点设成同一个位置就行。

/* 一个简单的条纹 */
background: linear-gradient(
    to right,
    #3498db 0%,
    #3498db 50%,
    #ecf0f1 50%,
    #ecf0f1 100%
);

你看，50% 这个位置既是蓝色的结束，又是灰色的开始。颜色在这里直接跳变，没有过渡。这就是条纹的核心——硬色标。

关键概念：线性渐变中，相邻两个色标如果位置相同，就会产生硬边。条纹就是靠这个硬边实现的。

3.2 重复线性渐变：一条规则，无限条纹

写一个条纹还好，写十个呢？总不能把色标从 0% 列到 100% 吧？repeating-linear-gradient 就是干这个的。

/* 重复条纹，间距 20px */
background: repeating-linear-gradient(
    to right,
    #3498db 0px,
    #3498db 10px,
    #ecf0f1 10px,
    #ecf0f1 20px
);

这里 0px 到 10px 是蓝色，10px 到 20px 是灰色。整个模式长度 20px，然后不断重复。我习惯用 px 单位，因为间距可控，不会因为容器尺寸变化而变形。

我的习惯：条纹间距用 px，角度用 deg。别混用百分比和 px，容易算错。

3.3 条纹的数学原理：角度、间距、宽度

你以为会写代码就够了？不，你得懂数学。不然角度一变，间距全乱套。

3.3.1 角度

to right 是 0deg，to bottom 是 90deg。但注意，45deg 不是简单的对角线。CSS 的角度是从底部开始逆时针算的，和数学坐标系不一样。

方向	关键字	角度值
从左到右	to right	0deg
从下到上	to top	0deg（反向）
从左上到右下	to bottom right	135deg
45 度斜线	—	45deg

避坑：45deg 条纹的视觉间距不是 10px，而是 10px / cos(45°) ≈ 14.14px。我在项目中遇到过，设计师说间距不对，我算了半天才发现是角度导致的投影长度变化。

3.3.2 间距与宽度的关系

条纹的间距和宽度，在重复渐变里由色标位置决定。假设条纹宽度为 w，间距为 g，那么一个周期的长度是 w + g。

/* 条纹宽 8px，间距 12px */
background: repeating-linear-gradient(
    45deg,
    #e74c3c 0px,
    #e74c3c 8px,
    #ffffff 8px,
    #ffffff 20px
);

这里周期是 20px。但注意，45 度时，实际视觉上的垂直间距是 20px × sin(45°) ≈ 14.14px。如果你想要视觉上正好 10px 间距，得反推：周期 = 10px / sin(45°) ≈ 14.14px。

公式总结：视觉间距 = 周期长度 × sin(角度)。角度越大，视觉间距越大。0 度时 sin(0)=0，条纹变成竖线，没有垂直间距。

3.4 知识结构图：条纹的核心要素

下面这张图把条纹的四个核心要素串起来了。你看一遍，基本就记住了。

3.5 实战：三种常见条纹模式

光说不练假把式。我直接给你三个常用模板，拿去就能用。

3.5.1 水平条纹

.stripe-horizontal {
    width: 300px;
    height: 200px;
    background: repeating-linear-gradient(
        to bottom,
        #2ecc71 0px,
        #2ecc71 10px,
        #ffffff 10px,
        #ffffff 20px
    );
}

3.5.2 45 度斜条纹

.stripe-diagonal {
    width: 300px;
    height: 200px;
    background: repeating-linear-gradient(
        45deg,
        #9b59b6 0px,
        #9b59b6 8px,
        #ffffff 8px,
        #ffffff 16px
    );
}

3.5.3 棋盘格（双向条纹）

.stripe-checkerboard {
    width: 300px;
    height: 200px;
    background:
        repeating-linear-gradient(
            45deg,
            #1abc9c 0px,
            #1abc9c 10px,
            #ffffff 10px,
            #ffffff 20px
        ),
        repeating-linear-gradient(
            -45deg,
            #1abc9c 0px,
            #1abc9c 10px,
            #ffffff 10px,
            #ffffff 20px
        );
}

避坑指南：我曾经用双向条纹做背景，结果两个渐变叠加后颜色变深了。后来发现是透明度问题。解决办法：两个渐变都用纯色，不要用 rgba，或者把其中一个的透明度设为 0.5。

3.6 常见问题与排查

问题	原因	解决方案
条纹不重复	用了 linear-gradient 而不是 repeating 版本	换成 repeating-linear-gradient
条纹模糊	色标位置不是整数，或用了百分比	用 px 单位，色标位置取整
45 度条纹间距不对	没考虑角度对投影的影响	用公式：周期 = 目标间距 / sin(角度)
条纹颜色不对	两个渐变叠加产生混合	检查透明度，或改用单一渐变

嗯，条纹这块其实不难，就是细节多。你只要记住：硬色标产生边界，重复渐变自动平铺，角度影响视觉间距。这三句话吃透了，条纹随便画。