html 实现格子效果,CSS中网格效果的实现方案

网络效果如下所示：

网格效果示例.png

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

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

方案1：table样式

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

此方案优点：

原理直观，易理解；

此方案缺点：

添加了较多冗余的元素；

方案2：双重条纹

此方案是通过给单个元素的背景图片设置2层或者多层方向相交的条纹来实现网络效果；

在同一个元素上设置多层条纹，需要用到background-image属性，background-image属性允许设置多个背景图片，并且层叠显示；下面先介绍背景图片的相关知识：

background-image属性：

语法：

background-image： [ , ]*

= | none

取值：

none：无背景图。

：使用绝对或相对地址指或者创建渐变色来确定图像。

所以，background-image属