加入邊框

1. 前言

不帶邊框和帶邊框的九宮格實(shí)現(xiàn)起來有著較大的不同，這是為什么呢？
比如先給大家看一個(gè)無邊框的九宮格：

通常來說沒有邊框的九宮格都是有一個(gè)間距，比如說朋友圈的那種：

如果給它加個(gè)邊框就會變成這樣：

看起來還是沒毛病對吧？那接下來我們把它們九個(gè)合并到一起去再看看：

2. 詳細(xì)對比

有沒有感覺好像哪里不太對？如果感覺不太明顯的話我們將灰色背景去掉再來瞅一眼：

是不是感覺格子里面的線條好像更粗呢？為什么會造成這種現(xiàn)象，其實(shí)是因?yàn)檫@樣：

相鄰的兩個(gè)邊框貼在了一起就會變成兩倍粗的一個(gè)大邊框。

3. 小結(jié)

之前我們都是用外邊距等屬性來讓九宮格之間有間距的，但還是有一些場景是不需要間距而需要邊框的，比如說微信的這個(gè)界面：

或者這種：

可以看到他們的各個(gè)邊框都很均勻，沒有出現(xiàn)哪粗哪細(xì)的情況，接下來我們就來講一下如何才能做到這一點(diǎn)。