css实现网格背景
纯CSS实现简约网格背景（极简代码、可直接复用）
一、最终效果预览
实现效果：全屏铺满的浅灰色细网格，横向、纵向线条均匀分布，且不会产生图片资源加载损耗。
可以参考本博客主页hero板块。
二、完整可运行代码
以下是精简完整版代码，复制即可直接使用，适配所有网页场景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格背景实现</title>
<style>
body {
margin: 0;
height: 100vh;
// 双层渐变：横向网格线 + 纵向网格线
background-image: linear-gradient(to right, #ccc 1px, transparent 1px),
linear-gradient(to bottom, #ccc 1px, transparent 1px);
// 控制网格单元格大小（间距）
background-size: 20px 20px;
}
</style>
</head>
<body>
</body>
</html>三、核心原理深度拆解
很多同学只会抄代码，但不懂原理，改参数就出错。这个网格背景的核心是 双层线性渐变叠加 + 背景尺寸裁切。
1. 双层渐变分工
-
linear-gradient(to right, #ccc 1px, transparent 1px)：生成垂直网格线
从左到右渐变，前1px渲染为灰色实线，剩余区域全部透明，实现单条纵向细线。 -
linear-gradient(to bottom, #ccc 1px, transparent 1px)：生成水平网格线
从上到下渐变，前1px渲染为灰色实线，剩余区域透明，实现单条横向细线。
2. background-size 核心作用
background-size: 20px 20px 是网格成型的关键：
将双层渐变背景，强制裁切为 20px * 20px 的小单元，浏览器会自动平铺填充整个页面。每个小单元的顶部、左侧各有1px线条，拼接后就形成了规整的正方形网格。