3.3 CSS3圖片邊框?qū)傩?/h2>
border-image效果在CSS2中疏咐，只有使用背景圖片來制作禀挫，而且制作過程非常復(fù)雜，做完后也很難維護抬闯。如今CSS3中增添了一個圖片邊框的屬性井辆，能夠模擬出background-image屬性的功能，功能比background-image強大溶握，我們可以使用border-image屬性給任何元素（除border-collapse屬性值為collapse的table元素之外）設(shè)置圖片效果邊框杯缺。
3.3.1 border-image屬性的語法及參數(shù)
border-image : none | <image> [<number> | <percentage>] {1, 4} [/ <border-width>] {1, 4} ] ? [stretch | repeat | round] {0, 2}
-
none：默認值，表示邊框無背景圖片睡榆。 -
<image>：設(shè)置背景圖片萍肆，這跟background-image一樣袍榆，可以使用絕對或相對的URL地址，來指定邊框的背景圖片塘揣。 -
<number>：number是一個數(shù)值包雀，用來設(shè)置邊框或者邊框背景圖片的大小，其單位就是像素(px)亲铡，可以使用 1~4 個值才写，表示4個方位的值，可以參考border-width的設(shè)置方式 -
<percentage>：percentage也是用來設(shè)置邊框或者邊框背景圖片的大小奖蔓，跟number不同之處是赞草，percentage使用的是百分比。 -
stretch吆鹤、repeat厨疙、round：這三個屬性參數(shù)是用來設(shè)置邊框背景圖片的鋪放方式，類似于background-repeat疑务，其中stretch會拉伸邊框背景圖片轰异、repeat是會重復(fù)邊框背景圖片、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來設(shè)置外歧杏，還可以使用百分比值來表示，即相對于邊框背景圖片而言的迷守。
2）剪切的特性(slice)犬绒。在border-image中slice是一個關(guān)鍵部分，也是讓人難以理解的部分兑凿。
這里可以參考w3cplus border-image了解更多凯力。
3茵瘾、border-image-width
語法：
border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}
border-image-width就是border-width，用來設(shè)置邊框的寬度咐鹤，我們也可以直接用border-width來代替border-image-width的拗秘。
4、border-image-repeat
語法：
border-image-repeat: [ stretch | repeat | round ]{1,2}
border-image-repeat是用來指定border-image的排列方式慷暂，這個屬性設(shè)置參數(shù)和其他的不一樣聘殖，border-image-repeat不遵循top,right,bottom,left的方位原則，他只接受兩個（或一個）參數(shù)值行瑞，第一個表示水平方向奸腺，第二個表示垂直方向；當(dāng)取值為一個值時血久，表示水平和垂直方向的排列方式相同突照。同時其默認值是stretch，如果你省略不取值時氧吐，那么水平和垂直方向都是以stretch排列讹蘑。
上面我們把
border-image像background-image一樣分解開給大家介紹了其相關(guān)的知識點，但是在實際應(yīng)用中筑舅，我們不是能分解的座慰，必須寫在一起，如果大家細心的話翠拣，從上面那些簡單實例中就能發(fā)現(xiàn)版仔，下面我將其正確的速記法列出來以供大家參考
border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>
3.3.3 瀏覽器兼容性
3.3.4 border-image屬性的優(yōu)勢
略
3.3.5 實戰(zhàn)體驗：按鈕圓角陰影效果
略（p100-p105） 太長了/(ㄒoㄒ)/~~ 有興趣的可以到這里學(xué)習(xí)參考
