CSS线性渐变可高效绘制矢量网格纸，通过双方向透明到实色的极细重复渐变叠加成方格，支持缩放、响应式与Retina适配。
用 CSS 线性渐变（linear-gradient）可以高效绘制网格纸效果，无需图片、不占资源，缩放不失真，适配响应式。核心思路是：用多个透明到实色的极细渐变条，在水平和垂直方向重复叠加，形成交叉线条。
基础单向网格（横线或竖线）
先理解单向渐变如何画线：比如画 1px 高的灰色横线，每 20px 重复一次，可写：
background-image: linear-gradient(to bottom, transparent 19px, #ccc 19px, #ccc 20px, transparent 20px);
这表示：从上往下，前 19px 透明，第 20px 是 #ccc（即画出 1px 线），紧接着立刻变回透明。配合 background-size: 100% 20px 实现等距重复。
叠加双方向实现方格（关键技巧）
方格 = 横线 + 竖线。CSS 支持多层渐变背景，用逗号分隔，后写的在下层，所以通常把竖线放前面、横线放后面（避免遮挡）：
background-image:<br> linear-gradient(to right, transparent 19px, #eee 19px, #eee 20px, transparent 20px),<br> linear-gradient(to bottom, transparent 19px, #eee 19px, #eee 20px, transparent 20px);<br>background-size: 20px 20px;
立即学习“前端免费学习笔记（深入）”；
注意：
• 两层渐变的 background-size 必须统一设为 20px 20px，才能对齐成正方形格子
• 颜色用浅灰（如 #eee）更接近传统方格纸，避免刺眼
• 若想加粗线条，把 19px/20px 改成 18px/20px（2px 线）
优化细节：让网格更真实
-
添加轻微阴影或描边感：给渐变色加 1% 不透明度（如
rgba(0,0,0,0.03)），比纯灰更柔和 -
适配 Retina 屏：用
background-size: 40px 40px+1px线（即transparent 39px, #eee 39px, #eee 40px），再配合transform: scale(0.5)或媒体查询 -
避免边缘断线：给容器设
background-clip: padding-box，防止圆角或边框裁切线条 -
文字可读性优先：网格颜色不要太深；若背景需衬文字，建议搭配半透明白底（
background-color: rgba(255,255,255,0.7)）
完整可用示例
复制即用的轻量网格类：
.grid-bg {<br> background-image:<br> linear-gradient(to right, transparent 49px, #e0e0e0 49px, #e0e0e0 50px, transparent 50px),<br> linear-gradient(to bottom, transparent 49px, #e0e0e0 49px, #e0e0e0 50px, transparent 50px);<br> background-size: 50px 50px;<br> background-color: #fff;<br>}
——生成 50×50px 大小、1px 宽浅灰方格，干净中性，适合笔记、表单、草稿区域。
