前端每日实战：苦练 CSS 基本功——图解辅助线的原理和画法

容器，不管容器里有没有元素，目前的demo是为了高亮辅助线，暂时让容器空着：2.一个基本的横线div{background-image:linear-gradient(tobottom,transparent95%,white95%);}网格线由线条组成，所以先画一条线，95%透明，只有5%是白色：3.水平线div{background-size:1em1em;background-repeat:no-repeat;}请把绘制网格线想象成地砖。首先，定义地砖的尺寸。这里用1em1em定义一个正方形的tile，同时tile是不重复的，所以只显示一个tile：4.Horizo??ntalflatnessFloortilesdiv{background-repeat:repeat-x;}如果地砖是水平铺的，可以合并成一条横线：5.Verticaltilesdiv{background-repeat:repeat-y;}如果地砖是竖铺的，可以合并成一条竖线。错误的！垂直平铺就像梯子效果：6.同时水平和垂直平铺地砖div{background-repeat:repeat;}同时水平和垂直平铺就像作业本一样是多条横线的效果。注意此时顶部没有线条：7.竖线平铺效果div{background-image:linear-gradient(toright,transparent95%,white95%);背景大小：1em1em；background-repeat:repeat;}如果把地砖改成向右垂直的线条，也就是只改变bottomtoright，其他不变，就会画出一排排的垂直线。另外注意此时最左边没有线：8.Imperfectgridlinediv{background-image:linear-gradient(tobottom,transparent95%,white95%),linear-gradient(toright,transparent95%,白色95%);背景大小：1em1em；background-repeat:repeat;}结合第6步和第7步，网格线基本形成，但顶部和左端仍然缺线：9,Atoplinediv{background-image:linear-gradient(totop,transparent95%,白色95%);背景大小：1em1em；background-repeat:no-repeat;}解决顶线的问题，先画一条顶线。这段代码和第3步很像，只是把tobottom改成了totop:10,一个toplinediv{background-repeat:repeat-x;}水平平铺topline，也就是定位在top的line横线：11，一段左端线div{background-image:linear-gradient(toleft,transparent95%,white95%);背景大小：1em1em；background-repeat:no-repeat;}用类似的方法解决左端线的问题，先定义一段左端线。注意linear-gradient函数的第一个参数改为toleft:12.Aleftendlinediv{background-repeat:repeat-y;}tilesthisleftendline,Yougetaverticallinenexttoleftsidecontainer:13.Allinone的完美效果div:nth-child(13){background-image:linear-gradient(tobottom,transparent95%,white95%),linear-gradient(toright,transparent95%,white95%),linear-gradient(totop,transparent95%,white95%),linear-gradient(toleft,transparent95%,white95%);背景-大小：1em1em；背景重复：重复，重复，重复x，重复y；好了，我们把第8步中不完美的网格线、顶线、左端线组合起来，形成一条完美的网格线，注意background-repeart的写法，它有4个参数，对应background-image中的4条线：做得好！收工。参考《CSS3 艺术》的4.1.2节，背景图片background-image《CSS3 艺术》的4.1.4节，背景大小background-size《CSS3 艺术》的4.1.5节，背景平铺background-repeat《CSS3 艺术》的4.2节,线性渐变linear-gradient()