用css一行代码实现可调间距网格背景：background-image:linear-gradient(#000 1px,transparent 1px),linear-gradient(90deg,#000 1px,transparent 1px);配合background-size控制格子大小，支持css变量动态调节线宽与间距。
怎么用 CSS 一行代码画出可调间距的网格背景
纯 CSS 实现网格背景最简单可靠的方式是 background-image 配合 linear-gradient。不用图片、不依赖 JS，缩放无锯齿，还能用 CSS 变量实时调节。
关键点在于：用两条正交的渐变（水平 + 垂直）叠加，通过透明色与实色控制线宽和间隔。
-
background-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px)—— 这是最小可用骨架，画出 1px 黑线、间距 1px 的网格 - 想改成 2px 线宽 + 20px 间距？把两个
1px换成2px，后面transparent的位置改成2px→22px（即线宽 + 间隔） - 推荐用 CSS 自定义属性封装：
--grid-size: 20; --grid-stroke: 1;，然后在渐变里写calc(var(--grid-stroke) * 1px)和calc(var(--grid-size) * 1px)
为什么 background-size 必须设成 grid-size × grid-size
如果不显式设置 background-size，浏览器会按默认重复单元（通常是整个元素尺寸）拉伸渐变，导致网格线错位或消失。
例如你用 linear-gradient(#000 1px, transparent 1px) 画横线，默认重复高度是 2px；但垂直方向同理，若没设 background-size: 20px 20px，两条渐变就不同步，网格就“歪了”。
- 必须让两个方向的渐变周期一致，
background-size就是这个周期值 - 值要等于你设计的“一个格子的宽高”，也就是
线宽 + 间隔，比如21px（1px 线 + 20px 空） - 如果用了 CSS 变量，就写成
background-size: calc(var(--grid-size) * 1px) calc(var(--grid-size) * 1px)
如何避免网格线在滚动/缩放时模糊或发虚
这是高频问题：Chrome 下 zoom=110% 或 macOS Retina 屏上，1px 网格线常变成 0.7px 渲染，灰蒙蒙看不清。
- 优先用
background-image方案而非box-shadow或伪元素拼接——后者更易失真 - 避免直接写死
1px，改用min(1px, 0.5vmin)或媒体查询适配高 DPI：@media (-webkit-min-device-pixel-ratio: 2) { ... 2px ... } - 加
background-repeat: repeat（虽然默认就是 repeat，但显式声明能防某些旧浏览器 fallback） - 不要给容器设
transform: scale()，这会强制重采样；缩放应交给 viewport 或 CSSzoom（仅限测试）
怎么导出为 PNG 或嵌入 Canvas 做动态网格
CSS 网格只是视觉层，无法直接“导出”。如需 PNG 或 Canvas 动态控制（比如拖拽时实时更新线距），必须用 JS 绘制。
Canvas 方案更可控：创建 <canvas></canvas>，用 ctx.moveTo()/ctx.lineTo() 画线，再用 canvas.toDataURL('image/png') 导出。
- 别试图把 CSS 背景“截图”——
html2canvas对渐变支持差，且跨域/缩放失真严重 - Canvas 绘制时注意：用
ctx.lineWidth = 1后，务必设ctx.lineCap = 'square'，否则端点圆角会让线看起来断开 - 如果只是想让用户下载，把 canvas 放在隐藏 div 里，生成后触发
download属性的<a></a>标签即可
实际最常被忽略的是 background-origin 和 background-clip 的组合影响：如果容器有 padding 或 border，网格可能从 content 区开始画，导致视觉偏移。需要统一设成 background-origin: border-box 并确认 background-clip: border-box。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
