CSS中线性渐变属性如何实现条纹背景的完整方法

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-gradient IE10+ 不支持带前缀写法，若需兼容老版本，降级方案就是手动写出完整周期的 linear-gradient + 显式 background-size
• 真正复杂场景（如 Sass 动态生成几十层条纹），用 linear-gradient 多层叠加更可控，因为每层可独立 background-position 像素对齐，避免重叠漏缝

最常被忽略的一点：所有色标单位必须统一（全用 px 或全用 %），且 background-size 的对应维度必须等于周期总长——这不是“差不多就行”的事，差 1px 就可能让 Safari 渲染出纯色块。