手把手教你用css画网格

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

先看最终效果图(图片有点模糊,实际效果更好):
手把手教你用css画网格_第1张图片

先直接上代码(直接复制就能出效果):

<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为间距,累积起来,就从视觉上形成了网格。

你可能感兴趣的:(前端,javascript,css,css,css3,前端)