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