斜线背景断续因渐变单元过小及像素对齐问题，需精确控制color stop位置；用「透明→色→透明」三段式、窄色段（如1px）+合理行距（如20px）；高DPI屏改用0.5px并设background-size强制重绘；响应式用CSS变量配合JS或媒体查询；半透明应避免rgba叠加，改用纯色底+透明镂空；Firefox不支持
repeating-linear-gradient画斜线背景为什么总显得断断续续
因为默认的渐变色块重复单元太小，而浏览器在像素对齐和缩放时容易出现间隙或模糊。关键不是调角度，是控制repeating-linear-gradient里颜色停靠点（color stop）的位置精度。
- 斜线本质是「透明 → 颜色 → 透明」三段式渐变，中间色段必须足够窄，否则变成条纹而非细线
- 推荐用
repeating-linear-gradient(45deg, #000 0, #000 1px, transparent 1px, transparent 20px)——这里1px是线宽，20px是行距，两者比例决定疏密 - 若在高DPI屏上发虚，把
1px换成0.5px并加background-size: 20px 20px强制重绘单元，避免浏览器自动缩放干扰
怎么让斜线背景适配不同容器尺寸且不拉伸变形
repeating-linear-gradient本身是矢量绘制，但background-size设错就会拉伸。真正影响比例的是渐变单元尺寸与background-size是否匹配。
- 写死
background-size: 20px 20px时，必须确保渐变定义里的周期长度（如上面例子中20px）和它一致，否则会错位 - 要响应式，别用
vw/vmin直接写进渐变参数（不支持），改用CSS自定义属性：--line-step: 20px，然后background-size: var(--line-step)，再用JS或媒体查询动态改变量 - 注意
background-repeat: repeat是默认值，删掉它不会省事，反而可能意外触发no-repeat
斜线颜色要半透明或渐变色，为什么直接套rgba就出问题
因为repeating-linear-gradient里多个颜色层叠时，透明度会叠加计算，不是“画一层半透色”那么简单。常见现象是线条变灰、发污、边缘晕开。
- 不要写
rgba(0,0,0,0.3) 0, rgba(0,0,0,0.3) 1px——这会让1px内反复叠加透明度，实际等效于更不透明 - 正确做法：用纯色+
background-color做底层，再用repeating-linear-gradient只负责“镂空”路径，例如background: #fff; background-image: repeating-linear-gradient(45deg, transparent 0, transparent 9px, #000 9px, #000 10px) - 若真需渐变色斜线，把整个渐变当一层图层，用
mask或clip-path裁切，而不是在repeating-linear-gradient里混用多个渐变色
Firefox下斜线偶尔消失或错位是什么原因
Firefox对repeating-linear-gradient中极小尺寸（尤其是）的解析更严格，且不支持0.5px这种非整数值作为色标位置（会四舍五入成1px）。
- 规避方法：统一用整数单位，比如
2px线宽 +40px间距，再通过background-size: 40px 40px缩放视觉大小 - 加
transform: translateZ(0)或will-change: background-position可强制Firefox走GPU渲染路径，减少光栅化误差 - 检查是否用了
background-attachment: fixed——它在Firefox中与repeating-linear-gradient组合时有已知渲染bug，建议禁用
斜线背景看着简单，实际卡点全在像素对齐、浏览器渲染策略差异和透明度叠加逻辑上。最常被忽略的是：别试图用渐变函数模拟“真实斜线”，先想清楚你要的是装饰性纹理，还是需要精确控制每根线的位置和粗细。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
