html的网格效果,CSS+HTML<网格背景效果>

image.png

知识点：

这里涉及的知识点其实很少，只要需要你去理解具体含义

其中包括 background: linear-gradient(),background-size,background-repeat

没错，只要你掌握了以上 3 点就能实现这种效果！！！

下面会告诉大家如何具体实现此效果，其中虚线部分的绘制比较麻烦，但是也是可以实现，所以接下来会一一讲解~~

实线网格绘制：

.grid-shi{

height: 100vh;

background: linear-gradient(to right,#ccc 50px,transparent 50px);

}

这个你应该看得懂，稍微会点css都知道，此时背景就是一个往右50px为灰色的背景图片，因为之后的为transparent所以50px之后都是透明色，也就是啥都木得

image.png

.grid-shi{

height: 100vh;

background: linear-gradient(to right,#ccc 50px,transparent 50px);

background-repeat: no-repeat;/* 默认为 rep