網(wǎng)絡(luò)效果如下所示：
在CSS中偏竟，網(wǎng)格效果的應(yīng)用還是很廣泛的庭惜，比如：棋盤格效果这揣、參考線效果等等悬槽；
在CSS中實現(xiàn)顏色突變的效果有多種方案怀吻，如下：
方案1：table樣式
這個方案的思路比較直觀，就是直接使用table元素或者通過設(shè)置display屬性為table類的值來生成表格布局初婆，然后對表格及其單元格應(yīng)用合適的邊框蓬坡；這樣就形成了網(wǎng)格了效果
此方案優(yōu)點：
- 原理直觀，易理解磅叛；
此方案缺點：
- 添加了較多冗余的元素屑咳；
方案2：雙重條紋
此方案是通過給單個元素的背景圖片設(shè)置2層或者多層方向相交的條紋來實現(xiàn)網(wǎng)絡(luò)效果；
在同一個元素上設(shè)置多層條紋弊琴，需要用到background-image屬性兆龙，background-image屬性允許設(shè)置多個背景圖片，并且層疊顯示访雪；下面先介紹背景圖片的相關(guān)知識：
background-image屬性：
語法：
background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = <image> | none
取值：
none：無背景圖详瑞。
<image>：使用絕對或相對地址指或者創(chuàng)建漸變色來確定圖像。
所以臣缀，background-image屬性支持定義了多組背景圖和漸變坝橡；并且且背景圖之間有重疊，寫在前面的將會蓋在寫在后面的圖像之上精置；除此之外计寇，與background-image相關(guān)的幾個其它的CSS屬性：background-repeat、background-attachment脂倦、background-position番宁、background-origin、background-clip赖阻、background-size等蝶押，也都支持定義多組背景圖的相關(guān)屬性值；
所以火欧，我們就可以通過漸變來生成條紋（詳情可參考《CSS中條紋效果的實現(xiàn)方案》）棋电，然后通過在background-image上定義多層漸變來疊加條紋，這樣就可以實現(xiàn)網(wǎng)格效果了苇侵；
原理演示如下：
-
設(shè)置水平條紋赶盔；
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
如果榆浓，把網(wǎng)絡(luò)線調(diào)細一點于未，效果會更好，如下：
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%);
示例效果：
![細網(wǎng)格.png][]
因為漸變可以設(shè)置方向，所以通過調(diào)整方向烘浦，還可以形成更多網(wǎng)格效果抖坪，比如：
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%);
示例效果：
此方案的優(yōu)點：
- 用單個元素實現(xiàn)，不用添加冗余元素谎倔；
- 可以實現(xiàn)任意多顏色的交替重復(fù)的網(wǎng)格柳击；
- 通過合理地組合漸變，可以實現(xiàn)多咱形狀的網(wǎng)格片习；
方案3：平鋪網(wǎng)格單元
很多規(guī)范的背景圖案都有最小的重復(fù)單位捌肴，通過在水平或者垂直方向平鋪最小重復(fù)單位，即可實現(xiàn)相應(yīng)背景圖案效果藕咏；網(wǎng)絡(luò)就是這種規(guī)范背景圖案中的一種状知，如下：
如圖中所示，黃色線框氣圈的就是此網(wǎng)格的最小重復(fù)單位（注意：圖案可能有多種最小重復(fù)單位）孽查，我們可以通過漸變生成這個最小重復(fù)單位饥悴，然后用background-repeat屬性平鋪這個重復(fù)單位，然后就可以得到如上圖所示的網(wǎng)格了盲再；
具體的原理演示如下：
-
設(shè)置最小重復(fù)單位的尺寸和重復(fù)模式：
CSS樣式：background-size: 20%; background-repeat:repeat; -
通過漸變設(shè)置最小重復(fù)單位西设；
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%);
示例效果：
此方案優(yōu)點：
- 用單個元素實現(xiàn)，不用添加冗余元素答朋；
- 不用插入輔助色標贷揽；
- 能實現(xiàn)方案2所能實現(xiàn)的所有效果；
相關(guān)文章:《 CSS中特殊效果的實現(xiàn)方案》
