在用 CSS 进行绘图和布局时，除了借助浏览器开拓工具之外，还常常须要绘制一些赞助线，以便定位参考。本日就以第 170 号作品中利用的网格线为例，详细讲解一下赞助线的事理和画法。
为了使赞助线明显可见，把线的颜色设置为和背景比拟强烈的白色，并且线也粗一些，在实际利用时，你该当降落赞助线与背景的比拟并且利用细线。
分步图解1、定义容器div { font-size: 50px; width: 6em; height: 4em; background-color: teal;}
假设你有一个 <div> 容器，容器里是否有元素都可以，当前演示为了突显赞助线，暂时让容器里空空如也：
2、一条基本的横线
div { background-image: linear-gradient(to bottom, transparent 95%, white 95%);}
网格线是一条一条线条组成的，以是要先画出一条线，它的95%都是透明的，只有5%是白色的：
3、一条有尺寸的横线
div { background-size: 1em 1em; background-repeat: no-repeat;}
我自己是一名从事了多年开拓的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适宜2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
请把绘制网格线想象成是铺地砖，首先要定义地砖的尺寸，这里用 1em 1em 定义了一块方砖，同时让砖块不重复，以是只显示出了孤单的一块砖：
4、横向平铺地砖
div { background-repeat: repeat-x;}
如果把地砖横向平铺，就能组合成一条水平线：
5、纵向平铺地砖
div { background-repeat: repeat-y;}
如果把地砖纵向平铺，就能组合成一条垂直线。错！
纵向平铺是像阶梯一样的效果：
6、横向和纵向同时平铺地砖
div { background-repeat: repeat;}
横向和纵向同时平铺，便是像作业本一样的多条横线效果。把稳，这时最顶端是没有线的：
7、竖线平铺效果
div { background-image: linear-gradient(to right, transparent 95%, white 95%); background-size: 1em 1em; background-repeat: repeat;}
如果把地砖换成向右的竖线，即只把 to bottom 改为 to right ，其他不变，绘制出的便是一排一排的竖线。同样把稳，这时最左边是没有线的：
8、不完美的网格线
div { background-image: linear-gradient(to bottom, transparent 95%, white 95%), linear-gradient(to right, transparent 95%, white 95%); background-size: 1em 1em; background-repeat: repeat;}
把第6步和第7步合并起来，网格线基本成型了，不过顶端和左端还短缺线条：
9、一段顶端线
div { background-image: linear-gradient(to top, transparent 95%, white 95%); background-size: 1em 1em; background-repeat: no-repeat;}
来办理顶端线的问题，先画出一段顶端线。这段代码和第3步极相似，仅仅是 to bottom 改成了 to top：
10、一条顶端线
div { background-repeat: repeat-x;}
把这一段顶端线水平平铺，便是一条定位在顶部的水平线：
11、一段左端线
div { background-image: linear-gradient(to left, transparent 95%, white 95%); background-size: 1em 1em; background-repeat: no-repeat;}
用类似的办法办理左端线问题，先定义一段左端线，把稳 linear-gradient 函数的第 1 个参数改成 to left 了：
12、一条左端线
div { background-repeat: repeat-y;}
平铺这段左端线，就得到了一条紧挨容器左侧的竖线：
13、All in one 的完美效果
div:nth-child(13) { background-image: linear-gradient(to bottom, transparent 95%, white 95%), linear-gradient(to right, transparent 95%, white 95%), linear-gradient(to top, transparent 95%, w hite 95%), linear-gradient(to left, transparent 95%, white 95%); background-size: 1em 1em; background-repeat: repeat, repeat, repeat-x, repeat-y;
好了，我们把第8步不完美的网格线、顶端线、左端线都合起来，便是完美的网格线了，把稳 background-repeart 的写法，它有 4 个参数，分别对应 background-image 里的 4 条线：
干得俊秀！
收工。
原文链接：https://segmentfault.com/a/1190000021507641
作者：comehope
