单个linear-gradient无法绘制真正对齐的网格线，因其仅生成单向渐变片段，双层叠加时起点与周期难以像素级同步，易导致横纵线交点偏移、边缘截断或缩放模糊；必须用repeating-linear-gradient并严格统一周期值、background-size、单位及background-origin。
不能直接用 linear-gradient 绘制真正对齐的网格线——它只画单向条纹，双方向叠加时极易错位；必须用 repeating-linear-gradient 或手动配两层 linear-gradient + 严控 background-size 和单位。
为什么单个 linear-gradient 画不出网格？
网格需要横纵两组线同时存在且像素级对齐。linear-gradient 本身只生成一个方向的渐变片段，即使写两层（比如水平+垂直），浏览器也不会自动保证它们的重复周期起点一致。常见现象包括：
- 横向线和纵向线在交点处偏移半像素，尤其在高 DPR 屏或缩放后明显
- 容器宽高不是
background-size的整数倍时，右/下边缘线条被截断 - 混用百分比和 px（如
background-size: 100% 20px）导致横向拉伸、纵向压缩
repeating-linear-gradient 是更稳的选择
它原生支持重复逻辑，避免靠 background-size 模拟带来的隐性偏差。关键参数必须严格匹配：
- 两条渐变的周期长度必须完全相等：比如横向写
repeating-linear-gradient(0deg, #ccc 0, #ccc 1px, transparent 1px, transparent 20px)，纵向就必须也用20px作周期 -
background-size必须显式设为相同值，例如background-size: 20px 20px；不能省略，也不能写成100% 100% - 所有数值统一用
px，禁用em、%或无单位数字（如transparent 1在 Safari 中可能失效） - 加
background-origin: border-box，防止边框干扰起始坐标
手动用两层 linear-gradient 怎么勉强可用？
仅当无法使用 repeating-linear-gradient（如需兼容极老浏览器）时才考虑，但必须满足以下条件：
- 每层渐变都用硬切写法：
red 10px, blue 10px，禁止出现10.1px这类插值间隙 - 横向层配
background-size: 100% 20px，纵向层配background-size: 20px 100%，且两个20px必须数值完全一致 - 必须写
background-position: 0 0锁定左上角为共同原点 - 线宽建议 ≥ 2px（如
#ccc 2px, transparent 2px），1px 在非整数缩放下容易模糊或消失
斜向网格线怎么避免锯齿？
直接用 repeating-linear-gradient(45deg, ...) 配 background-size: 30px 30px 在高 DPR 屏上大概率错位。更可靠的做法是：
- 先用
to right写竖向细线：repeating-linear-gradient(90deg, #eee 0, #eee 1px, transparent 1px, transparent 20px) - 再给容器加
transform: rotate(45deg) - 外层容器设
overflow: hidden裁掉旋转溢出部分 - 注意：旋转后容器尺寸会变，需预留足够 padding 或用
transform-origin微调
真正难的不是写对一行渐变，而是让横纵两组线在所有缩放、DPR、容器尺寸变化下始终咬合——这要求每个像素值都闭环验证，而不是凭感觉凑数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
