CSS3中用linear-gradient绘制网格背景

body {
  background-position: 50% 0, 50% 0;
  background-size: 30px 30px, 30px 30px;
  background-color: #f2f2f5;
  background-image: linear-gradient(#fbfbfc,#fbfbfc 1px,transparent 1px,transparent 10px,#f6f6f8 10px,#f6f6f8 11px,transparent 11px,transparent 20px,#f6f6f8 20px,#f6f6f8 21px,transparent 21px),linear-gradient(90deg,#fbfbfc,#fbfbfc 1px,transparent 1px,transparent 10px,#f6f6f8 10px,#f6f6f8 11px,transparent 11px,transparent 20px,#f6f6f8 20px,#f6f6f8 21px,transparent 21px);
}

上面是viewsourceconf.org的一个section网格背景。

主要原理

利用CSS3的linear-gradient功能，将不需要的区域变透明，留出网格线条区域。

1.绘制背景

为了看得清楚，使用纯黑色背景；

background-color: #000000;

2.绘制网格单元

background-size: 30px 30px;

这里画出了一个30px * 30px的方形区域作为背景大小，background-repeat的属性默认是repeat，所以整个background会排列满这个方块，所以我们只用画出一个unit就可以了。我们可以在画的时候将background-repeat改为no-repeat观察进度；

3.画线

这里用到了CSS3的linear-gradient属性来画线，当渐变的两端颜色一样时，这个渐变区域就变成一条纯色的线。

我们要在30px * 30px的方块中画3 * 3的网格，也就是要在1px, 11px, 21px的水平竖直位置各画3条线。

为了清楚的看到区别，我们画不同颜色的线。

background-image: /*横线*/linear-gradient(#FC0000,#00FF78 1px, transparent 1px, transparent 10px)

到这里，已经画出了第一横线。也就是0 - 1px的区域里，画出了由#FC0000渐变至#00FF78的一条1px宽的线。transparent 1px, transparent 10px 将1px到10px的位置变成透明。如果不将这个区域设置为透明，那么在1px到10px区域里，从1px位置的颜色会渐变到下一个区域的颜色。

同理设置其他的线条，也可以将线条颜色换为其他颜色查看具体区别。

绘制竖线时，将linear-gradient值中加入（90deg）旋转90即可。

4.其他

可以将网格向左移动一部分，这样不会显示的特别刻板。

background-position: 50% 0;

5.偷懒

如果不要求每条线都要设置的话，其实写成这样看起来也一样：

body ｛
    background-position: 50% 0;
    background-color: #000000;
    background-size: 10px 10px;
    background-image: linear-gradient(transparent 9px, #ffffff 9px,#ffffff 10px),linear-gradient(90deg, transparent 9px, #ffffff 9px,#ffffff 10px)
｝