必须用repeating-linear-gradient配合严格匹配的background-size才能生成稳定网格；linear-gradient+background-repeat无效，因其返回类型，不支持repeat，DevTools会划掉该样式。
直接用 repeating-linear-gradient 配合严格匹配的 background-size，就能稳定生成像素级对齐的网格背景；别用 linear-gradient 加 background-repeat，那根本不起作用。
为什么不能用 linear-gradient + background-repeat
linear-gradient 返回的是一个 <image></image> 类型值，不是位图，background-repeat 对它完全无效——DevTools 里会直接划掉这行样式。浏览器只认 repeating-linear-gradient 或 repeating-radial-gradient 这两个原生重复函数。
- 写
background: linear-gradient(to right, #000 1px, transparent 1px); background-repeat: repeat;→ 只渲染一次渐变，后面全空 - 正确写法必须是
repeating-linear-gradient，且色标之间要硬切（如#000 1px, transparent 1px） - 漏掉
background-size或设错值，会导致网格拉伸、断线、或整块变纯色
横向+纵向渐变怎么叠才不糊
网格本质是两层条纹正交叠加：一层横线 + 一层竖线。关键不是“方向角度”，而是两层的周期长度和 background-size 必须完全一致，否则错位。
- 横向线：
repeating-linear-gradient(to bottom, #ccc 0px, #ccc 1px, transparent 1px, transparent 20px) - 纵向线：
repeating-linear-gradient(to right, #ccc 0px, #ccc 1px, transparent 1px, transparent 20px) -
background-size必须设为20px 20px（即单个完整周期宽高） - 别用
45deg写斜线——高 DPR 屏上易锯齿；真要斜，先做直角条纹再transform: rotate()
background-size 和色标单位怎么配才稳
色标用 px 最可靠；用百分比或 vmin 在缩放/响应式时容易失准。周期长度 = 最后一个色标值（如 transparent 20px 中的 20px），background-size 就得等于它。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 错误示例：
repeating-linear-gradient(... #000 0, #000 10px, transparent 10px, transparent 19px)→ 周期是19px，但background-size: 20px 20px就会截断线条 - 正确示例：
repeating-linear-gradient(... #000 0, #000 1px, transparent 1px, transparent 20px)+background-size: 20px 20px - 想响应式？改用
calc(1vmin)或 CSS 变量：background-size: var(--grid-step) var(--grid-step)，然后 JS 动态更新变量
棋盘格和实线网格的区别在哪
棋盘格要的是“仅重叠区显色”，所以两层都必须用 transparent 做非实色部分；实线网格则只需一层实色+一层透明作为“基底线”即可。
- 实线网格（如稿纸线）：
background-image: repeating-linear-gradient(to bottom, #eee 0, #eee 1px, transparent 1px, transparent 20px), repeating-linear-gradient(to right, #eee 0, #eee 1px, transparent 1px, transparent 20px) - 棋盘格（黑白方块）：
background-image: repeating-linear-gradient(0deg, #000 0, #000 10px, transparent 10px, transparent 20px), repeating-linear-gradient(90deg, #000 0, #000 10px, transparent 10px, transparent 20px)+background-size: 20px 20px - 千万别把第二层写成实色（如
#fff）——叠加后会变灰，不是清晰棋盘
最常被忽略的点：background-position: top left。不加这个，滚动或缩放时网格线会“漂移”，尤其在 Safari 和移动端 Webview 里特别明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
