想引用一篇他人的文章，为了与原创内容的版式产生差异，准备将引用内容用blockquote元素包裹，并且为其实现一个特别的背景。网上搜索好看的背景图的时候无意中发现原来纯css也可以实现简单的网格背景，正好更高难度的拼接图片啥得咱也不会，就挑个最容易实现的吧。
线性渐变linear-gradient
css3的渐变可以在两个或多个指定的颜色之间展现平稳的过渡，在此之前，我们必须使用图像来实现这些效果。通过使用css3的渐变（gradients），现在我们可以减少下载的时间和带宽的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
css3定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向；
- 径向渐变（Radial Gradients）- 由它们的中心定义。
利用纯css实现一个网格背景，我们只需要用到线性渐变，这个一个简单的线性渐变的案例，笔者在这个实例中将blockquote作为了容器，当然您也可以选择div，下面这个例子实现了一个纵向的渐变：
<style>
blockquote{
width:700px;
height:120px;
background:linear-gradient(red,orange);
}
</style>如果需要一个横向的渐变，我们需要为gradient提供一个角度，就像这样：
<style>
blockquote{
width:700px;
height:120px;
background:linear-gradient(90deg,red,orange);
}
</style>跟很多图像处理软件一样，css的线性渐变同样支持更多的颜色：
<style>
blockquote{
width:700px;
height:120px;
background:linear-gradient(90deg,red,yellow,orange);
}
</style>linear-gradient的语法
linear-gradient(角度, 颜色1 结束位置, 颜色2 结束位置, ...);当颜色1的结束位置不为0的时候，起始位置(0位)到颜色结束位置之间的这一部分是不会产生渐变效果的，这一部分呈现为纯色，色彩即为颜色1；而当颜色1的结束位置等于或者大于颜色2的结束位置的时候，两个结束位置之间也无法产生渐变，假如该渐变仅两种颜色，那么颜色2结束位置至色块尾部之间的距离也不会产生渐变，呈现为颜色2，这样就通过线性渐变的极限值，实现了泾渭分明的两种颜色。就像下面这个实例，我们将两种颜色的终点位置都设置为2px，这个实例中我们限定了背景图的尺寸，因为背景图默认是平铺的，所以还是占满了容器。
<style>
blockquote{
width:700px;
height:120px;
background:linear-gradient(90deg,#333 2px,#f90 2px);
background-size: 60px 60px;
}
</style>linear-gradient是允许叠加的，我们可以将其属性定义成这样，然而实际显现的效果并没有什么两样：
<style>
blockquote{
width:700px;
height:120px;
background:linear-gradient(90deg,#333 2px,#f90 2px),linear-gradient(#333 2px,#f90 2px);
background-size: 60px 60px;
}
</style>接下来修改一下这两个线性渐变的顺序，这次仅仅显示了横线，竖线在渲染时被覆盖了，虽然还是没能达到我们的目标，但至少可以说明一点，线性渐变的渲染顺序是自右向左的，这个例子中css首先渲染了右边的竖直样式，又接着渲染了逗号左侧的横线样式，结果把前者给覆盖了。
<style>
blockquote{
width:700px;
height:120px;
background:linear-gradient(#333 2px,#f90 2px),linear-gradient(90deg,#333 2px,#f90 2px);
background-size: 60px 60px;
}</style>我们需要的最终效果是纯色的网格图，因为两次线性渐变的颜色相互覆盖，所以我们需要将上面一层的背景色设置为透明，前面说了渲染的顺序自右向左，所以我们尝试把左边的，也就是被放置于上一层的渐变的背景色设置为透明。
<style>
blockquote{
width:700px;
height:200px;
background:linear-gradient(90deg,#333 2px,transparent 2px),linear-gradient(#333 2px,#f90 2px);
background-size: 60px 60px;
}
</style>成功生成了一个网格图片，就是格子的间距似乎过于大了，再适当微调以下，将background-size的长宽都稍微调小一些，最终效果如下：
<style>
blockquote{
width:700px;
height:200px;
background:linear-gradient(90deg,#333 2px,transparent 2px),linear-gradient(#333 2px,#f90 2px);
background-size: 40px 40px;
}
</style>一个扩展案例
弄明白了其中的原理，我们也可以利用线性渐变的特性来打造更多的效果，比如下面的色块图：
<style>
blockquote{
width:700px;
height:200px;
background:linear-gradient(135deg,#ccc 50%,#eee 50%);
background-size: 40px 40px;
}
</style>css实现网格背景的实例文件 提取码: xb8c
