网络效果如下所示：
在CSS中，网格效果的应用还是很广泛的，比如：棋盘格效果、参考线效果等等；
在CSS中实现颜色突变的效果有多种方案，如下：
方案1：table样式
这个方案的思路比较直观，就是直接使用table元素或者通过设置display属性为table类的值来生成表格布局，然后对表格及其单元格应用合适的边框；这样就形成了网格了效果
此方案优点：
- 原理直观，易理解；
此方案缺点：
- 添加了较多冗余的元素；
方案2：双重条纹
此方案是通过给单个元素的背景图片设置2层或者多层方向相交的条纹来实现网络效果；
在同一个元素上设置多层条纹，需要用到background-image属性，background-image属性允许设置多个背景图片，并且层叠显示；下面先介绍背景图片的相关知识：
background-image属性：
语法：
background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = <image> | none
取值：
none：无背景图。
<image>：使用绝对或相对地址指或者创建渐变色来确定图像。
所以，background-image属性支持定义了多组背景图和渐变；并且且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上；除此之外，与background-image相关的几个其它的CSS属性：background-repeat、background-attachment、background-position、background-origin、background-clip、background-size等，也都支持定义多组背景图的相关属性值；
所以，我们就可以通过渐变来生成条纹（详情可参考《CSS中条纹效果的实现方案》），然后通过在background-image上定义多层渐变来叠加条纹，这样就可以实现网格效果了；
原理演示如下：
-
设置水平条纹；
CSS样式：background-image: repeating-linear-gradient(red 0%, red 10%, green 10%, green 20%,blue 20%,blue 30%);示例效果：
水平条纹.png -
添加垂直平条纹；
CSS样式：background-image: repeating-linear-gradient(red 0%, red 10%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%), repeating-linear-gradient(to right,red 0%, red 10%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%);示例效果：
添加垂直条纹.png
如果，把网络线调细一点，效果会更好，如下：
CSS样式：
background-image:
repeating-linear-gradient(red 0%, red 1%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 10%),
repeating-linear-gradient(to right, red 0%, red 1%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 10%);
示例效果：
![细网格.png][]
因为渐变可以设置方向，所以通过调整方向，还可以形成更多网格效果，比如：
CSS样式：
background-image:
repeating-linear-gradient(60deg, red 0%, red 1%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 10%),
repeating-linear-gradient(-60deg, red 0%, red 1%, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 10%);
示例效果：
此方案的优点：
- 用单个元素实现，不用添加冗余元素；
- 可以实现任意多颜色的交替重复的网格；
- 通过合理地组合渐变，可以实现多咱形状的网格；
方案3：平铺网格单元
很多规范的背景图案都有最小的重复单位，通过在水平或者垂直方向平铺最小重复单位，即可实现相应背景图案效果；网络就是这种规范背景图案中的一种，如下：
如图中所示，黄色线框气圈的就是此网格的最小重复单位（注意：图案可能有多种最小重复单位），我们可以通过渐变生成这个最小重复单位，然后用background-repeat属性平铺这个重复单位，然后就可以得到如上图所示的网格了；
具体的原理演示如下：
-
设置最小重复单位的尺寸和重复模式：
CSS样式：background-size: 20%; background-repeat:repeat; -
通过渐变设置最小重复单位；
CSS样式：background-image: linear-gradient(red 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(to right, red 50%, rgba(0, 0, 0, 0) 50%);
完整的CSS样式：
background-size: 20%;
background-repeat:repeat;
background-image:
linear-gradient(red 50%, rgba(0, 0, 0, 0) 50%),
linear-gradient(to right, red 50%, rgba(0, 0, 0, 0) 50%);
示例效果：
此方案优点：
- 用单个元素实现，不用添加冗余元素；
- 不用插入辅助色标；
- 能实现方案2所能实现的所有效果；
相关文章:《 CSS中特殊效果的实现方案》
