有了CSS3之邊框圖片Border-image，我們可以輕松搞定圓角，輕松搞定很多之前難搞的視覺效果。我們先來看下border-image的相關(guān)語法。
　　
　　語法：　　
　　border-image：[ border-image-source ] || [ border-image-slice ] [ / [ border-image-width ]? | / [ border-image-outset ] ]? || [ border-image-repeat ]
　　默認值：看每個獨立屬性　　
　　適用于：看每個獨立屬性　　
　　繼承性：無　　
　　動畫性：看每個獨立屬性　　
　　計算值：看每個獨立屬性
　　
　　取值：　
　　[ border-image-source ]：　　
　　設(shè)置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑。　　
　　[ border-image-slice ]：　　
　　設(shè)置或檢索對象的邊框背景圖的分割方式。　　
　　[ border-image-width ]：　
　　設(shè)置或檢索對象的邊框厚度。
　　[ border-image-outset ]：
　　設(shè)置或檢索對象的邊框背景圖的擴展。
　　[ border-image-repeat ]：
　　設(shè)置或檢索對象的邊框圖像的平鋪方式。
　　
　　說明：
　　復(fù)合屬性。設(shè)置或檢索對象的邊框樣式使用圖像來填充。
　　使用圖像替代border-style去定義邊框樣式。當(dāng)border-image為none或圖像不可見時，將會顯示border-style所定義的邊框樣式效果。
　　對應(yīng)的腳本特性為borderImage。
　　
　　下面詳細用圖文說明Border-image。
　　請看下圖平剖析一下css代碼
　　
　　也就是：
　　他們把圖片，用#的方式截取，然后用 stretch | repeat | round 來控制水平或垂直的效果。看看下圖你就明白了
　　
　　當(dāng)然關(guān)于邊框的寬度你也可以用%;其原理也是一樣：
　　
　　到這  大家應(yīng)該弄明白border-image是怎么一回事了吧。