repeating-linear-gradient可高效实现可控斜线条纹，核心是色标位置对齐重复单元；需注意按钮默认样式覆盖、文字对比度、移动端最小2px单元及background-blend-mode兼容性。
直接用 repeating-linear-gradient 就能做出干净、可调、无图的斜线条纹，比拼接 linear-gradient + background-size 更直观，也比贴 PNG 纹理更轻量可控。
repeating-linear-gradient 实现斜线纹理的核心写法
关键不是角度或颜色本身，而是「色标位置必须对齐重复单元」。比如要 4px 宽的条纹（2px 实色 + 2px 透明），就得让透明段和实色段长度严格相等，且总长能被整除。
-
repeating-linear-gradient(-45deg, transparent, transparent 2px, #333 2px, #333 4px)：-45° 斜线，每 4px 一循环，其中前半透明、后半实色 - 角度值越接近 0° 或 90°，条纹越平/越竖；常用 -45°、45°、135° 这类对角方向
- 颜色可以是
rgba()或hsla()，方便控制透明度而不影响父层文字可读性 - 别漏掉
background-repeat: repeat（默认就是，但显式写上更稳妥）
button 元素叠加纹理时的常见失效原因
按钮本身有默认 border、padding、background-color，容易盖住渐变或导致渲染错位。
- 先清空默认背景：
background: none或直接用多重背景语法覆盖 - 如果用了
background: #fff, repeating-linear-gradient(...)，注意顺序：靠后的层在下，所以纹理得写在前面 - 按钮文字颜色必须和纹理对比足够——半透灰条纹配深色字没问题，但配浅灰字可能看不清
- 移动端缩放时，小尺寸条纹（如
1px宽）可能被浏览器抗锯齿模糊，建议最小用2px单元
与 background-blend-mode 搭配做质感增强
单层斜线容易显得单调，加一层底色渐变再用混合模式叠纹理，能模拟布纹、金属拉丝等效果。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
background: linear-gradient(135deg, #4a00e0, #8e2de2), repeating-linear-gradient(150deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 4px, transparent 4px, transparent 8px) - 紧接着加：
background-blend-mode: overlay—— 这会让纹理只影响明暗，不压住底色饱和度 - 注意：IE 不支持
background-blend-mode，需要降级为单层纹理或提供备用样式 - 别在
button上同时设border和background-blend-mode，某些 Safari 版本会渲染异常
真正难的不是写出第一行 repeating-linear-gradient，而是调出「刚好不抢眼、又足够有细节」的条纹密度和透明度——这得靠预览时放大到 200%，盯着边缘看是否发虚，而不是靠公式算出来。
