repeating-linear-gradient没条纹最常见原因是色标未硬接和background-size未配对：相邻色标值必须相等（如#000 0px,#000 4px,#fff 4px,#fff 8px），且background-size需等于重复周期总长（如8px）。
repeating-linear-gradient 能直接出条纹，但写错一个色标位置，它就变纯色、发虚或断开——不是浏览器不支持，是你没告诉它“怎么重复”。
为什么 repeating-linear-gradient 写出来没条纹
最常见原因就两个：color-stop 没硬接、background-size 没配对。
- 相邻色标值不相等：比如
#000 0px, #000 9px, #fff 10px, #fff 20px→ 中间 1px 被插值过渡，条纹边缘模糊甚至消失 - 最后一个色标值 ≠ 重复周期长度：比如写成
red 0, red 2px, blue 2px, blue 5px，周期是 5px，但你设background-size: 4px 4px，结果平铺错位 - 漏写
background-repeat: repeat：某些 reset CSS 会把它重置为no-repeat，条纹只显示一次 - 容器
height或width为0或被折叠（如父元素display: flex且子项没设min-height），再对的代码也渲染不出
repeating-linear-gradient 的色标必须“硬接”
所谓“硬接”，是指前一颜色的结束位置，必须和后一颜色的起始位置完全一致。浏览器看到相同位置有两个颜色，才不会插值，而是直接拼接。
- ✅ 正确写法：
repeating-linear-gradient(to bottom, #2c3e50 0px, #2c3e50 4px, #34495e 4px, #34495e 8px) - ❌ 错误写法：
repeating-linear-gradient(to bottom, #2c3e50 0px, #2c3e50 3.9px, #34495e 4.1px, #34495e 8px) - 单位统一用
px更稳：比百分比更可控，尤其当周期固定（如 2px 线宽）时；避免混用%和px - 别省略第二个值：写
red等价于red 0%，容易引发意外过渡；显式写red 0px更安全
必须配 background-size，且值要等于重复单元总长
repeating-linear-gradient 只定义“一个格子长啥样”，不控制怎么铺。它靠 background-size 告诉浏览器：“这个格子物理上多大”。
- 周期总长 = 最后一个色标值（如
0px, 2px, 2px, 4px→ 总长4px） - 垂直条纹（
to bottom）：设background-size: auto 4px（高度方向每 4px 一周期） - 水平条纹（
to right）：设background-size: 4px auto - 斜向条纹（如
45deg）：视觉周期需按 √2 放大，4px直角周期建议设background-size: 6px 6px - 别依赖默认值：显式写
background-repeat: repeat，防止被全局样式覆盖
斜向条纹优先用 to right/to bottom + transform: rotate()
直接写 45deg 在高 DPR 屏幕（MacBook Retina、安卓旗舰）上容易锯齿、错位，尤其当周期小于 4px 时。
- 更稳做法：先用
to right写出清晰横条纹，再给容器加transform: rotate(45deg) - 注意
transform-origin和overflow: hidden配合，避免旋转后内容溢出 - 若坚持用角度，Safari 对
90deg兼容性略差，推荐用to right替代 - 高 DPR 下 1px 条纹天然发虚，不是 bug —— 多数成熟设计系统（如 Ant Design）从 2px 起步，这是实际妥协点
px 单位定义色标时，background-size 的值必须和它严格一致；而一旦用了 %，background-size 就变成缩放整个单元的“物理尺寸映射”，不是调单个色带宽度——这两套逻辑不能混。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
