3.3 CSS3圖片邊框屬性
border-image效果在CSS2中，只有使用背景圖片來制作，而且制作過程非常復雜，做完后也很難維護。如今CSS3中增添了一個圖片邊框的屬性，能夠模擬出background-image屬性的功能，功能比background-image強大，我們可以使用border-image屬性給任何元素（除border-collapse屬性值為collapse的table元素之外）設置圖片效果邊框。
3.3.1 border-image屬性的語法及參數
border-image : none | <image> [<number> | <percentage>] {1, 4} [/ <border-width>] {1, 4} ] ? [stretch | repeat | round] {0, 2}
-
none：默認值，表示邊框無背景圖片。 -
<image>：設置背景圖片，這跟background-image一樣，可以使用絕對或相對的URL地址，來指定邊框的背景圖片。 -
<number>：number是一個數值，用來設置邊框或者邊框背景圖片的大小，其單位就是像素(px)，可以使用 1~4 個值，表示4個方位的值，可以參考border-width的設置方式 -
<percentage>：percentage也是用來設置邊框或者邊框背景圖片的大小，跟number不同之處是，percentage使用的是百分比。 -
stretch、repeat、round：這三個屬性參數是用來設置邊框背景圖片的鋪放方式，類似于background-repeat，其中stretch會拉伸邊框背景圖片、repeat是會重復邊框背景圖片、round是平鋪邊框背景圖片，其實stretch為默認值。
border-image和background-image之間有一些類似之處，包括圖片的引用和排列方式。
3.3.2 border-image屬性使用方法
- 引入背景圖片：
border-image-source。 - 切割引入北京圖片：
border-image-slice。 - 邊框圖片的寬度：
border-image-width。 - 邊框背景圖片的排列方式：
border-image-repeat。
1、border-image-source
語法：
border-image-source : url(image url); //image url可以是相對地址也可以是絕對地址。
2、border-image-slice
語法：
border-image-slice : [<number> | <percentage>] {1, 4} && fill ?
border-image-slice是用來分解引入進來的背景圖片。
- 取值支持
<number> | <percentage>。其中number是沒有單位的，因為其默認的單位就是像素。除了直接用number來設置外，還可以使用百分比值來表示，即相對于邊框背景圖片而言的。
2）剪切的特性(slice)。在border-image中slice是一個關鍵部分，也是讓人難以理解的部分。
這里可以參考w3cplus border-image了解更多。
3、border-image-width
語法：
border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}
border-image-width就是border-width，用來設置邊框的寬度，我們也可以直接用border-width來代替border-image-width的。
4、border-image-repeat
語法：
border-image-repeat: [ stretch | repeat | round ]{1,2}
border-image-repeat是用來指定border-image的排列方式，這個屬性設置參數和其他的不一樣，border-image-repeat不遵循top,right,bottom,left的方位原則，他只接受兩個（或一個）參數值，第一個表示水平方向，第二個表示垂直方向；當取值為一個值時，表示水平和垂直方向的排列方式相同。同時其默認值是stretch，如果你省略不取值時，那么水平和垂直方向都是以stretch排列。
上面我們把
border-image像background-image一樣分解開給大家介紹了其相關的知識點，但是在實際應用中，我們不是能分解的，必須寫在一起，如果大家細心的話，從上面那些簡單實例中就能發現，下面我將其正確的速記法列出來以供大家參考
border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>
3.3.3 瀏覽器兼容性
3.3.4 border-image屬性的優勢
略
3.3.5 實戰體驗：按鈕圓角陰影效果
略（p100-p105） 太長了/(ㄒoㄒ)/~~ 有興趣的可以到這里學習參考
