什么是點九圖

啊??，通過百度我了解到：
點九圖其實就是安卓系統(tǒng)中特有的一種圖片格式，為了讓大家更好的記住，我們只要知道，后綴名是「.9.png」的圖片，就是點九圖。

為什么要使用點九圖呢？

我們通過拉伸圖片做背景時，遇到一些邊角像素比較復雜的圖形進行等比例拉伸時，很可能會造成拉伸變形，這個時候我們就可以通過，點九圖來讓優(yōu)化這種變形狀態(tài)。例如下圖：

1426410830.jpg

2115808115.jpg

拉伸后的背景氣泡圖明顯會出現(xiàn)邊角高度被拉長，這樣達不到好的效果，這個時候點九圖就可以來解決這個問題啦！

點九圖的原理

點九圖為啥叫點九圖呢，就是通過將一個圖片切四刀??，來讓它變成九個區(qū)域，例如下圖：

252991469.jpg

然后我們就用了四刀來切割了這個圖形，這四刀很關鍵，因為這和我們css里的 border-image-slice 有著密切的關系。

border-image-slice: 12 34 12 34 fill;
border-image-width: 12px 34px 12px 34px;

切割的順序就是上，右，下，左，對應著一刀，二刀，三刀，四刀。
這樣就達到了，從切割的1、6、3、8區(qū)域不變，然后只拉伸2、4、5、7區(qū)域，這樣的話就可以讓那個氣泡的角不拉伸，只拉伸中間部分復制達到多行文字氣泡的效果。

border-image的參數(shù)該如何填寫呢？

因為這個順序和切割刀的順序是一樣的，并且每刀對應著上，右，下，左四個邊，所以我們可以通過測了每刀對應圖片上，右，下，左的距離，來進行填寫，并且width和slice的參數(shù)是一樣的，但是slice不帶單位默認px, 因為是針對原圖, 所以沒必要考慮外界因素。

border-image-slice: [第一刀到上邊的距離] [第二刀到右邊的距離] [第三刀到下邊的距離] [第四刀到左邊的距離] fill;

這就是點九圖的使用方法，你學廢了嗎？??