repeating-linear-gradient出现锯齿的直接原因是高dpr屏幕下浏览器对1px色标抗锯齿插值导致边缘柔化；解决方法是改用2px色标、合理设置background-size、避免rgba色标混用透明度，并统一使用to right/to bottom替代90deg/180deg。
repeating-linear-gradient 出现锯齿的直接原因
不是代码写错了，而是浏览器在高 DPR 屏幕（比如 MacBook Retina、iPhone、安卓旗舰）上对 1px 级别色标做抗锯齿插值时，把硬边条纹柔化成了灰边或半透明过渡。你看到的“断续”“发虚”“边缘模糊”，本质是渲染引擎在像素对齐失败后做的自动补偿。
用 2px 色标替代 1px 是最稳的解法
别试图靠 image-rendering: pixelated 或 backface-visibility: hidden 强行干预——它们对渐变无效。真实有效的做法是让最小单位脱离亚像素陷阱：
-
repeating-linear-gradient(90deg, #000 0, #000 1px, transparent 1px, transparent 4px)❌ 容易发虚 -
repeating-linear-gradient(90deg, #000 0, #000 2px, transparent 2px, transparent 8px)✅ 视觉干净、兼容性好 - 如果设计稿真要求细线，可改用
0.5px+ 显式background-size强制重绘单元，例如background-size: 8px 8px
斜向条纹必须调大 background-size 周期
写 45deg 时，视觉间距比直角方向长约 √2 倍（约 1.414）。若渐变定义周期是 8px，但 background-size 还设成 8px 8px，就会错位、拉伸、边缘露白：
- 正确配比：
repeating-linear-gradient(45deg, #000 0, #000 2px, transparent 2px, transparent 16px)→background-size: 22px 22px（16 × 1.4 ≈ 22） - 更稳妥的做法：先用
to right写横条纹，再对容器加transform: rotate(45deg)，避开角度渲染歧义 - Safari 对
90deg支持略差，横向统一用to right，纵向用to bottom
半透明线条千万别用 rgba() 直接塞进色标
写 rgba(0,0,0,0.3) 0, rgba(0,0,0,0.3) 1px 看似合理，实则会让浏览器在 1px 内反复叠加透明度，结果线条变灰、晕开、对比度崩坏：
- 正确方式：底层用纯色
background-color，上层repeating-linear-gradient只负责“镂空”路径，例如background: #f9f9f9; background-image: repeating-linear-gradient(45deg, transparent 0, transparent 9px, #000 9px, #000 10px) - 若需背景透出，用
mask或clip-path裁切整个渐变图层，而不是在色标里混透明度
真正难的不是写出能动的代码，而是意识到：repeating-linear-gradient 的“重复单元”长度、background-size 值、设备像素比、浏览器抗锯齿策略，这四者必须咬合。漏掉任意一环，锯齿就藏在缩放、滚动、DPR 切换的缝隙里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
