repeating-linear-gradient是实现条纹背景最直接、可控的纯CSS方案，它通过定义无缝重复的渐变单元（如“#3498db 0px, #3498db 2px, #ecf0f1 2px, #ecf0f1 4px”）并配合显式background-size（如4px 100%）实现精准条纹，避免截断、发虚或错位。
用 repeating-linear-gradient 做条纹背景最直接
按钮上要条纹，不是靠贴图也不是写一堆 linear-gradient 层叠，repeating-linear-gradient 专为这种周期性图案设计。它自动重复你定义的颜色区间，比如“10% 深蓝 + 10% 浅灰”，就生成等宽交替条纹。
常见错误是把方向写成 to bottom 却忘了容器高度不够——条纹被截断只显示半条。实际中更推荐用固定像素单位配合 background-size 控制节奏，更可控：
-
background-image: repeating-linear-gradient(90deg, #3498db, #3498db 2px, #ecf0f1 2px, #ecf0f1 4px)：竖条纹，每条宽 2px -
background-size: 4px 100%必须配对写，否则条纹会拉伸或错位 - 水平条纹改
0deg，斜条纹用45deg，但注意斜向在小尺寸按钮上容易锯齿，建议搭配image-rendering: pixelated抑制模糊
background-image 里混用渐变和条纹的坑
想让按钮既有底色渐变、又有覆盖其上的细条纹（比如噪点感），不能把两个 linear-gradient 往 background-image 里一塞就完事。CSS 多层背景是从后往前叠，顺序反了条纹就被盖住。
正确写法是把条纹放后面（底层），主渐变放前面（上层），并用透明度或颜色控制透出程度：
立即学习“前端免费学习笔记（深入）”；
background-image: linear-gradient(135deg, #6a11cb, #2575fc), repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0.05) 2px)- 必须加
background-size: 200% 200%, 2px 2px——两层各自独立设尺寸，缺一不可 - 移动端 Safari 对多层
background-image解析较慢，若按钮频繁重绘（如 hover 动画中），可能卡顿；此时建议用伪元素单独承载条纹层
按钮圆角下条纹边缘撕裂怎么修
给按钮加了 border-radius 后，条纹在拐角处常出现断裂、错位或颜色溢出，本质是 background-clip 默认值为 border-box，而条纹图案没跟着弧度弯曲。
解决思路不是删圆角，而是约束绘制区域：
- 加
background-clip: padding-box，让条纹只画在内边距区，避开圆角交界干扰 - 如果仍露底色，补一句
overflow: hidden强制裁切（注意这会影响内部阴影或悬停动画溢出效果） - 更稳妥的做法：把条纹做在
::before伪元素上，按钮本体只负责圆角和文字，伪元素设border-radius: inherit并z-index: -1，完全解耦
IE 和旧安卓 WebView 里条纹不显示？降级方案要提前埋
repeating-linear-gradient 在 IE10+、Android 4.4+ WebView 中支持尚可，但低版本会直接忽略整条 background-image 声明，按钮变空白或纯色。
别等上线才发现——降级必须显式写进 CSS：
- 先写单色
background-color: #3498db，确保基础可用 - 再写
background-image，现代浏览器会覆盖掉上面那行 - 避免用
background简写，它会清空已设的background-color，导致降级失效 - 真要兼容 Android 4.0 以下？只能用 base64 编码的 2×2 条纹 PNG 当
background-image，体积小、无兼容问题
