在CSS3中我認為border-image算是一個比較復雜的屬性，雖然平時用到的情況較少，但還是有必要深入學習下。
border-image
border-image用於定義帶有背景圖片的邊框樣式，它是以下幾個屬性的簡寫：
// 邊框圖片的路徑
border-image-source
// 圖片邊框的切割位置
border-image-slice
// 圖片邊框的寬度
border-image-width
// 邊框圖像超出邊框的量
border-image-outset
// 邊框圖片的平鋪方式
border-image-repeat
border-image-source
這個屬性很好理解，就是定義圖片的url，例如border-image-slice: url('a.jpg')
border-image-slice
這個屬性定義邊框的裁切位置，先看一個圖片:
這個圖片的寬高都是81px，每個小菱形的寬高都是27px，我用這張圖寫了個小demo：
在例1中我定義了slice的值為27，這里千萬不要有單位，屬性值也可以是百分比，為百分比時是相對於元素的寬高，其實border-image-slice: 27相當於border-image-slice: 27 27 27 27，這四個值什么意思呢。下面上一張圖：
第一個27表示在距離元素頂部27px的位置切一刀，第二個27表示在距離右邊27px位置切一刀，第三個很顯然是在距離元素下邊27px的位置切一刀，第四個27表示在距離左部27px的位置切一刀，四個值切四刀，當然四個值是不需要全寫的，當你只寫第一個時其他三個同第一個，寫兩個時值一同值三，值二同值四，寫三個時值四同值二。四到下去得到了九塊區域，其中紅色區域時永不會改變的區域，刀的位置決定了四角的大小，但是藍色區域和內容區是可變的，可以通過border-image-repeat來設置。
border-image-repeat
這個屬性決定了圖中藍色區域的展示方式，他的默認值stretch表示拉伸，何為拉伸？拿例1來說，很顯然中間的菱形變形了，這就是拉伸的效果。屬性值round表示平鋪，例2就是平鋪的效果，仔細觀察發現藍色小菱形變形了，這是因為邊框區域無法剛好顯示整數個小菱形，於是就會就變形了。屬性repeat表示重復，這個很好理解就是復制復制再復制，顯然邊框顯示了不完整的菱形，但是他們是沒有變形的，只是剪斷了，而且兩邊還是均勻的，這是因為復制是從中間開始的，這也是重復和平鋪的區別。
border-image-width
定義圖片邊框的寬度，百分比和數值都可以，表示四個值，例如border-image-width: 10px 20px就相當於border-image-width: 10px 20px 10px 20px，平常習慣於定義border-width，我比較推薦這種寫法，用border-image-width和border-width還是有不同的地方的，例4中可以看到那個白色的文字跑到邊框上了，這是因為邊框也是屬於盒子自身的，這不是我想要的效果，另外我在例4中的border-image-width帶了單位，如果不帶單位就像例5中一樣，它是border-width幾何倍數。
border-image-outset
我把它叫做邊框背景擴散，屬性值和border-image-width類似，可以是百分比，可以是像素和數值，當為數值時表示border-width的倍數。例6中我寫了個小例子，從例6和例3的對比效果可以很明顯觀察大，內容區擴散了。
小實戰
用下面這張圖片寫一個小demo：
好處還是很明顯的，不受內容區文字個數顯示，自動拉伸，發揮想象力可以做出很多奇妙的效果