repeating-linear-gradient实现条纹的关键是颜色停靠点必须紧邻重叠（如#000 10px, #fff 10px），否则会插值发虚；周期长度须与background-size严格匹配，且需显式声明background-repeat: repeat。
repeating-linear-gradient 写错颜色停靠点会直接失效
浏览器只认“紧邻重叠”的色标，比如 #3498db 0px 和 #3498db 4px 后紧跟 #ecf0f1 4px，才能硬切出清晰条纹。一旦中间留空（如写成 #3498db 4px 然后 #ecf0f1 5px），就会插值出灰边或完全发虚，看着像糊掉的色带。
- ✅ 正确写法：
repeating-linear-gradient(to bottom, #2c3e50 0px, #2c3e50 4px, #34495e 4px, #34495e 8px) - ❌ 错误写法：
repeating-linear-gradient(to bottom, #2c3e50 0px, #2c3e50 4px, #34495e 5px, #34495e 9px) - 单位必须显式：写
0不如写0px或0%，否则某些浏览器按默认0%解析，可能意外引入过渡
background-size 必须和渐变周期严格匹配
repeating-linear-gradient 只定义“一个格子长啥样”，铺不铺、怎么铺，全靠 background-size 控制。漏设、设错或被父级样式覆盖，条纹就断、拉伸、只显示一次，甚至整个背景变纯色。
- 若渐变写的是
red 0, red 2px, blue 2px, blue 4px，周期是4px，那必须配background-size: auto 4px（竖条纹）或4px 4px（方格） - 用百分比色标时，
background-size: 20px 20px表示把 100% 映射为 20px，整块单元等比缩放 - 别依赖 reset CSS，默认
background-repeat: repeat可能被干掉，建议显式声明
按钮上做条纹背景要注意 display 和层叠顺序
按钮元素常被设成 display: inline-block 或 flex，但 background-image 在 display: flex 的按钮里容易被子元素遮挡或尺寸计算异常；若按钮内有 <span></span> 文字或伪元素，它们可能盖住背景。
- 确保按钮本身有明确宽高（如
min-width、padding），避免背景因内容塌陷而不可见 - 若用
::before绘制条纹，需设z-index: -1并确认父容器没设overflow: hidden - 移动端高 DPR 屏上细条纹易发虚，优先用
px单位 +image-rendering: pixelated防模糊
斜向条纹在按钮上容易边缘锯齿，优先用 to right/to bottom
真要斜纹，45deg 配 background-size: 30px 30px 很容易在按钮圆角或边界处出现毛边，尤其 iOS Safari 渲染不稳定。不如用更可控的横向/纵向交替方案替代。
- 横向条纹：用
to bottom+background-size: auto 8px - 纵向条纹：用
to right+background-size: 8px auto - IE10–11 不支持
repeating-前缀，降级方案用linear-gradient手写单周期 + 显式background-size
最麻烦的不是写对语法，而是改完发现条纹没出来——大概率是 background-size 被某层继承样式覆盖了，或者按钮用了 flex 但没设 align-items: flex-start 导致高度塌缩。调试时先临时加个 outline: 1px solid red 看真实尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
