加入邊框

1. 前言

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

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

如果給它加個邊框就會變成這樣：

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

2. 詳細對比

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

是不是感覺格子里面的線條好像更粗呢？為什么會造成這種現象，其實是因為這樣：

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

3. 小結

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

或者這種：

可以看到他們的各個邊框都很均勻，沒有出現哪粗哪細的情況，接下來我們就來講一下如何才能做到這一點。