网络效果如下所示：

网格效果示例.png

在CSS中，网格效果的应用还是很广泛的，比如：棋盘格效果、参考线效果等等；

在CSS中实现颜色突变的效果有多种方案，如下：

方案1：table样式

这个方案的思路比较直观，就是直接使用table元素或者通过设置display属性为table类的值来生成表格布局，然后对表格及其单元格应用合适的边框；这样就形成了网格了效果

此方案优点：

1. 原理直观，易理解；

此方案缺点：

1. 添加了较多冗余的元素；

方案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上定义多层渐变来叠加条纹，这样就可以实现网格效果了；

原理演示如下：

1. 设置水平条纹；
   CSS样式：

   background-image: repeating-linear-gradient(red 0%, red 10%, green 10%, green 20%,blue 20%,blue 30%);
   

   示例效果：

   水平条纹.png

2. 添加垂直平条纹；
   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%);

示例效果：

菱形网格.png

此方案的优点：

1. 用单个元素实现，不用添加冗余元素；
2. 可以实现任意多颜色的交替重复的网格；
3. 通过合理地组合渐变，可以实现多咱形状的网格；

方案3：平铺网格单元

很多规范的背景图案都有最小的重复单位，通过在水平或者垂直方向平铺最小重复单位，即可实现相应背景图案效果；网络就是这种规范背景图案中的一种，如下：

最小重复单位.png

如图中所示，黄色线框气圈的就是此网格的最小重复单位（注意：图案可能有多种最小重复单位），我们可以通过渐变生成这个最小重复单位，然后用background-repeat属性平铺这个重复单位，然后就可以得到如上图所示的网格了；

具体的原理演示如下：

1. 设置最小重复单位的尺寸和重复模式：
   CSS样式：

   background-size: 20%;
   background-repeat:repeat; 
   

2. 通过渐变设置最小重复单位；
   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%);

示例效果：

平铺最小单位.png

此方案优点：

1. 用单个元素实现，不用添加冗余元素；
2. 不用插入辅助色标；
3. 能实现方案2所能实现的所有效果；

相关文章:《 CSS中特殊效果的实现方案》