手把手教你用css画网格

最近一个项目需要网格背景。UI把网格当做图帮我切好了，我一看，这明明可以直接用css直接画嘛，能直接减少体积。对于有技术追求的前端，我就研究了一下怎样画这个高逼格的网格背景；

先看最终效果图（图片有点模糊，实际效果更好）：

先直接上代码（直接复制就能出效果）：

<template>
<!-- 外层盒子设置整体背景渐变蓝色 -->
  <div class="big-bg">
    <!-- 内层盒子铺满网格 -->
    <div class="inner-bg">

    </div>
  </div>
</template>

<script>
</script>

<style lang="scss" scoped>
.big-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    251.54deg,
    #1f75ad -10.05%,
    #194061 47.56%,
    #152439 100.71%
  );
}
.inner-bg {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      90deg,
      rgba(33, 233, 252, 0.12) 1%,
      rgba(0, 0, 0, 0) 5%
    ),
    linear-gradient(rgba(33, 233, 252, 0.12) 1%, rgba(0, 0, 0, 0) 5%);
  background-size: 28px 28px;
}
</style>

下面用到的画网格知识点（.inner-bg）：
1）background-size: 28px 28px;设置了背景图的大小；
2）background-repeat没有设置，默认值是repeat，意思是从左到右不断重复；
3）background-image，这个值里面分别画了一个格子的某两条边的横线和竖线；

以上几点结合起来就是用渐变的横线和渐变的竖线，以28px为间距，累积起来，就从视觉上形成了网格。