第二十三章 CSS邊框圖片效果
一、屬性解釋
用幾個屬性就可以嵌入圖片形式的邊框。
1、border-image-source : 引入背景圖片地址
2、border-image-slice : 切割引入背景圖片
3、border-image-width : 邊框圖片的寬度
4、border-image-repeat : 邊框背景圖片的排列方式
5、border-image-outset : 邊框背景向外擴展
6、border-image : 上面五個屬性的簡寫方式
二、屬性解釋
首先，用Photoshop軟件分析一下這個標准九宮格的總體大小和每個格子的大小，最終得出圖片總大小為81px正方形，四個角的大小為27px的正方形，，其余五個角也為27px.
那么，第一步，先創建一個盒子區域，大小為400*400的矩形，然后設置引入邊框圖像。
//引入邊框圖像
border-image-source:url(border.png) //如果只有這句話，webkit引擎下的瀏覽器會在盒子區塊的四個角看到
一丁點圖像的影子，而其他瀏覽器什么也看不到，這是由於沒有設置邊框背景圖片的寬度導致的。
//設置邊框圖像寬度，上右下左，可以設置四個值
border-image-width：81px; //這里設置的是邊框圖像的寬度，而不是邊框寬度。當設置后，會發現文本會偏移，而邊框圖像的寬度不會積壓文本。
//設置邊框寬度
border-width：20px;
以上設置完畢后支持邊框的瀏覽器會在四個角落鋪上這張圖片的完整形式。這個時候需要引入切割屬性來配置來配置背景圖片的顯示方式
//首先，邊框圖像寬度設置為27px和一個單格寬高一致
border-image-width：27px;
//設置切割屬性的大小
border-image-slice:27; //這里不需要設置px像素，因為它默認就是像素，
//從27逐步放大到81，四個角都慢慢縮小，各自顯示一個完整的圖像
border-image-slice:81;
//從27逐步縮小到0，發現四個角都慢慢變大，配合fill整體顯示一個完整的圖像
border-image-slice：0 fill;
//33.5%差不多是27
//上下設置27，左右設置0；
//向外擴張20px，也可以是浮點數，比如2.2；
四個角設好后，我們要設定四個點的顯示排列方式。使用border-image-repeat屬性，有四個值提供使用
屬性 說明
stretch 指定用拉伸方式填充邊框背景圖，默認值。
repeat 指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時，如果超過，則被截斷
** round 指定用平鋪方式來填充邊框背景圖。圖片就根據邊框的尺寸動態調整圖片大小，直至正好可以鋪滿整個邊框
space 指定用平鋪方式來填充邊框背景圖。圖片就根據邊框的尺寸動態調整圖片之間間距，直至正好可以鋪滿整個邊框
//拉伸方式填充，通過上右下左設置四個邊均可
border-image-repeat;stretch;
//平鋪填充，超過則被截斷
border-image-repeat;repeat;
//平鋪填充，動態調整圖片大小直至鋪滿
border-image-repeat;round；
//平鋪填滿，動態調整圖片間距直至鋪滿
border-image-repeat;space；
三、簡寫形式
border-image簡寫格式如下：
border-image:<'border-image-source'>||<'border-image-slice'>[/<'border-image-width'>]|/<'border-image-width'>?/<'border-image-outset'>]?||<'border-image-repeat'>
簡寫格式： border-image：url（border.png） 27/27/px round;
對於支持的版本如下
Opera Firefox Chrome IE Safari
部分支持需帶前綴 11.5～12.1 3.5～14 4～14 3.1～5.1 無
支持需帶前綴 無 無 無 無 無
支持不帶前綴 15+ 15+ 15+ 6+ 11.0+
//兼容加上前綴
-webkit-border-image:url（border.png） 27/27/px round;
-moz--border-image:url（border.png） 27/27/px round;
-o-border-image:url（border.png） 27/27/px round;
border-image:url（border.png） 27/27/px round;