用linear-gradient做硬边条纹的关键是色标同位置硬切+background-size精确匹配周期总长，如#fb3 50%,#58a 50%触发浏览器跳过插值直接突变；多色需闭合色标链并统一单位，斜向推荐repeating-linear-gradient防错位。
直接用 linear-gradient 做复杂条纹，核心不是“调渐变”，而是控制色标硬切位置 + 精确匹配 background-size；写错一个像素或漏掉单位，条纹就发虚、错位或只剩一片色。
为什么两个色标同位置（如 #fb3 50%, #58a 50%）能出硬边？
浏览器对同位置色标的处理是：放弃插值计算，直接在该点做颜色突变。这不是“短渐变”，而是两块实色拼接——上半部分全为 #fb3，下半部分全为 #58a。
- ✅ 正确写法：
linear-gradient(to bottom, #2c3e50 4px, #34495e 4px)—— 黑在4px结束，灰在4px开始 - ❌ 错误写法：
linear-gradient(to bottom, #2c3e50 4px, #34495e 4.1px)—— 中间0.1px被插值，边缘发灰、模糊 - 单位必须统一：别混用
50%和10px在同一组声明里，否则行为不可控
多色不等宽条纹怎么写？关键在色标顺序和周期总长
三色（红/白/蓝）、宽度分别为 5px/15px/10px，周期总长是 30px，必须显式写出每一段的起止边界。
- 色标链要闭合：
red 0, red 5px, white 5px, white 20px, blue 20px, blue 30px -
background-size必须设为100% 30px（水平条纹）或30px 100%（垂直条纹），否则铺不满或拉伸变形 - 别偷懒写
red 33%, white 33%, blue 66%：中间会插值，不是硬切；用33.333%比33%更稳，尤其在小容器或高 DPR 屏上
斜向条纹为什么推荐 repeating-linear-gradient？
用普通 linear-gradient(45deg, ...) 配 background-size: 20px 20px 极易露白边、错位，因为单元尺寸和角度不正交，高 DPR 下像素对齐失败。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐写法：
repeating-linear-gradient(45deg, #fb3, #fb3 10px, #58a 0, #58a 20px) -
#fb3 10px表示第一色块宽10px，#58a 0表示第二色块从同一位置开始，#58a 20px表示该段总长20px（含重叠） - ⚠️ 别漏
repeating-前缀：没有它，只画一次渐变，不会平铺 - 透明条纹（如网格线）要写
white 1px, transparent 0，不能省略单位或写成0%，Safari 会不认
最常被忽略的是色标位置与 background-size 的数值一致性——周期总长必须等于 background-size 对应维度的值，差 1px 都可能让条纹在滚动或缩放时跳变。动手前先算清总长，再填色标，比反复调试快得多。
