CSS 渐变生成条纹背景，这个技巧听起来有点反直觉——毕竟 linear-gradient 的本职工作是做平滑过渡，怎么反而用来画硬边？其实原理很简单：让相邻色标的值完全重合，浏览器就会放弃插值，瞬间切换颜色，清晰边界就出来了。
直接用 linear-gradient 实现条纹，核心不是“做渐变”，而是让颜色在某个位置硬切——只要相邻色标值完全相等，浏览器就放弃插值，画出清晰边界。
为什么linear-gradient能出条纹，而不是渐变？
因为 CSS 渐变的色标（color stop）允许重叠。当两个不同颜色指定同一位置（比如 red 50%, blue 50%），浏览器会在该点瞬间切换，不过渡、不模糊。
- ✅ 正确写法：
linear-gradient(to bottom, #2c3e50 4px, #34495e 4px)—— 黑在 4px 结束，灰在 4px 开始，硬边 - ❌ 错误写法：
linear-gradient(to bottom, #2c3e50 4px, #34495e 4.1px)—— 中间 0.1px 被插值，发虚甚至变灰阶 - 百分比也适用，但单位混用易翻车：
red 50%, white 50%可行，但别和10px混在同一个声明里
background-size 必须显式设置，否则条纹会拉伸或消失
linear-gradient 本身只定义一个“片段”，它不会自动重复；靠 background-size + 默认 repeat 实现平铺。漏掉 background-size，浏览器按元素尺寸拉伸整个片段，条纹就没了。
- 水平条纹（如红白横纹）：
background-size: 100% 20px→ 高度 20px 一周期，宽度撑满 - 垂直条纹（如竖向细线）：
background-size: 10px 100%→ 宽度 10px 一周期，高度撑满 - 斜向条纹慎用
45deg直接配background-size: 30px 30px：高 DPR 屏上容易错位，边缘锯齿；更稳做法是先写to right+background-size: 10px 100%，再对容器加transform: rotate(45deg)
多色、不等宽条纹怎么写？
关键在色标顺序和数值安排。每段条纹由“前色结束位置 = 后色开始位置”定义，总周期长度就是最后一个色标值。
- 三色等宽（红/白/蓝，各 10px）：
linear-gradient(to bottom, red 0, red 10px, white 10px, white 20px, blue 20px, blue 30px)，再配background-size: 100% 30px - 不等宽（红 5px / 白 15px）：
linear-gradient(to bottom, red 0, red 5px, white 5px, white 20px)，周期总长 20px，background-size: 100% 20px - 透明条纹（如网格线）：
linear-gradient(white 1px, transparent 0)→ 白线仅 1px 高，其余全透；注意必须写transparent 0，不能省略单位或写成0%，否则 Safari 可能不认
和repeating-linear-gradient比，有什么实际区别？
repeating-linear-gradient 是原生重复机制，linear-gradient + background-size 是模拟重复。前者语义清晰、容错强；后者在容器尺寸非周期整数倍时容易边缘截断或拉伸变形。
- 比如容器高 105px，周期设 20px：
linear-gradient版最后一段只剩 5px，浏览器会拉伸补满，导致那条纹变厚；repeating-linear-gradient则严格按 20px 无限平铺，不依赖容器尺寸 - 兼容性上，
repeating-linear-gradientIE10+ 不支持带前缀写法，若需兼容老版本，降级方案就是手动写出完整周期的linear-gradient+ 显式background-size - 真正复杂场景（如 Sass 动态生成几十层条纹），用
linear-gradient多层叠加更可控，因为每层可独立background-position像素对齐，避免重叠漏缝
最常被忽略的一点：所有色标单位必须统一（全用 px 或全用 %），且 background-size 的对应维度必须等于周期总长——这不是“差不多就行”的事，差 1px 就可能让 Safari 渲染出纯色块。
