摘要：一鋪搞定一鋪清袋粵語(yǔ)的一鋪搞定其實(shí)就是一次完成全部工作的意思，上面關(guān)于的屬性，要是每次都逐個(gè)設(shè)置那要敲多少次鍵盤(pán)啊。。。語(yǔ)法粵語(yǔ)的一鋪清袋其實(shí)就是把之前的成果一次性歸零。

?當(dāng)CSS3推出border-radius屬性時(shí)我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來(lái)模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/right-radius的水平半徑之和大于元素寬度時(shí)，實(shí)際值會(huì)按比例分配元素寬度時(shí)，不禁會(huì)問(wèn)"我真的懂border嗎？"。本系列將稍微深入探討一下那個(gè)貌似沒(méi)什么好玩的border！
《CSS魔法堂：重拾Border之——解構(gòu)Border》
《CSS魔法堂：重拾Border之——圖片作邊框》
《CSS魔法堂：重拾Border之——不僅僅是圓角》
《CSS魔法堂：重拾Border之——更廣闊的遐想》

........

?起初瀏覽一遍border-image的用法時(shí)，總以為就是border變粗了，然后以圖片作為L(zhǎng)ine Pattern，接著是各種平鋪方式就完事了。后來(lái)細(xì)讀W3C Spec，發(fā)現(xiàn)我還是2 young 2 simply了，簡(jiǎn)稱(chēng)太2了。
?要理解好border-image，那么先要理解它由那幾類(lèi)對(duì)象組成，對(duì)象間的關(guān)系和組合規(guī)則。

目標(biāo)元素本身(即上面的div元素)

用作邊框素材的圖片(即上面的border.png)

貼圖區(qū)(Border Image Area)

?用過(guò)PS或Flash的同學(xué)應(yīng)該都清楚圖層的概念吧，反正我是現(xiàn)在才理解圖層的:(
目標(biāo)元素和貼圖區(qū)分別位于兩個(gè)圖層，并且貼圖區(qū)所在的圖層位于目標(biāo)元素所在的圖層之上，而素材圖片經(jīng)切割后將在貼圖區(qū)圖層上作后期處理，最后作圖層合成處理。
?重申3點(diǎn)

目標(biāo)元素和素材的圖片分別在各自獨(dú)立的圖層上繪制;

圖片會(huì)經(jīng)過(guò)切割后，按規(guī)則在所屬圖層上的貼圖區(qū)內(nèi)作定位和平鋪處理;

圖片所屬圖層在目標(biāo)元素所在圖層之上。

?在理解border-image的組成和整體處理流程后，我們先通過(guò)屬性來(lái)認(rèn)識(shí)與圖片和貼圖區(qū)密切相關(guān)的知識(shí)——圖片切割/切片和貼圖區(qū)切割/切片

屬性border-image-source

   作用：引入用作邊框素材的圖片資源
   語(yǔ)法：`border-image-source:url("image url")`
   url入?yún)閳D片路徑，可以是HTTP或HTTPS Scheme URI下的絕對(duì)或相對(duì)路徑，或采用Data Scheme URI。

屬性border-image-slice

   作用：對(duì)通過(guò)`border-image-source`引入的圖片資源，以九宮格的形式作切片
   語(yǔ)法：`border-image-slice: [ | ]{1,4} fill?`
   屬性值的順序和簡(jiǎn)寫(xiě)時(shí)語(yǔ)法擴(kuò)展的規(guī)則與屬性`border-width`一致(top,right,bottom,left)，而其含義為距離圖片各邊(top/right/bottom/left)多遠(yuǎn)的位置上，畫(huà)一條與對(duì)應(yīng)邊相互平衡的切割線。**注意：切割線必須位于圖片所在面積內(nèi)**
   **``:**以圖片的尺寸(寬、高)作為參考系，設(shè)置距離各邊的距離。默認(rèn)值為100%
   **``:**設(shè)置距離各邊的絕對(duì)距離，單位固定為px
   **`fill`:**設(shè)置是否將九宮格里正中間的切片，應(yīng)用到貼圖區(qū)中。默認(rèn)值為禁用，即默認(rèn)情況下九宮格中僅有8塊切片會(huì)應(yīng)用到貼圖區(qū)中。

注意
?當(dāng)水平方向(left/right)的切片重疊時(shí)，會(huì)導(dǎo)致top、middle和bottom切片的尺寸為0;
?當(dāng)垂直方向(top/bottom)的切片重疊時(shí)，會(huì)導(dǎo)致left、middle和right切片的尺寸為0;
?因此默認(rèn)情況下border-image-slice: 100%，所以top/right/bottom/left/middle的切片尺寸均為0，而4個(gè)角top-left/right和bottom-left/right切片的尺寸為整張圖片，因此最后結(jié)果僅看到邊框4個(gè)角有圖片，而4邊卻沒(méi)有顯示。

示意圖：

4條灰色線表示切割線，它們和圖片的4條邊框一起把圖片劃分為九宮格，得到以下9幅切片。

?相對(duì)目標(biāo)元素和素材圖片而言，貼圖區(qū)由于無(wú)法直接觀察，導(dǎo)致比較難理解。

默認(rèn)情況下貼圖區(qū)與目標(biāo)元素完全重疊;

貼圖區(qū)同樣被劃分成9塊區(qū)域，分別對(duì)應(yīng)素材圖片的9塊切片。默認(rèn)情況下貼圖區(qū)中除middle區(qū)域外，其他區(qū)域的尺寸與目標(biāo)元素的border box一致。

通過(guò)border-image-width可修改各區(qū)域的尺寸；

通過(guò)border-image-outset可修改貼圖區(qū)的尺寸。

border-image-outset: 12px;

屬性border-image-width

    作用：以九宮格的形式對(duì)貼圖區(qū)進(jìn)行切片
    語(yǔ)法：`border-image-width: [ |  |  | auto]{1,4}`
    屬性值的順序和簡(jiǎn)寫(xiě)時(shí)語(yǔ)法擴(kuò)展的規(guī)則與屬性`border-image-slice`一致(top,right,bottom,left)，而其含義為距離貼圖區(qū)各邊(top/right/bottom/left)多遠(yuǎn)的位置上，畫(huà)一條與對(duì)應(yīng)邊相互平衡的切割線。**注意：切割線必須位于貼圖區(qū)所在面積內(nèi)**
   **``:**設(shè)置距離各邊的絕對(duì)距離，負(fù)數(shù)無(wú)效。
   **``:**以貼圖區(qū)的尺寸(寬、高)為參考系，設(shè)置距離各邊的距離
   **``:**以對(duì)應(yīng)的border-width為參考系，設(shè)置距離各邊的距離。**默認(rèn)值為1**
   **`auto`:**設(shè)置為與素材圖片中對(duì)應(yīng)的切片一致
   注意：若貼圖區(qū)水平方向(left/right)或垂直方向(top/bottom)的區(qū)域發(fā)生重疊，則會(huì)對(duì)其進(jìn)行縮放直到不發(fā)生重疊為止。計(jì)算縮放因子的公式`f = min(width/(left + right), height/(top + bottom))`，然后left/right/top/bottom4個(gè)區(qū)域則按縮放因子進(jìn)行縮放操作。

屬性border-image-outset

    作用：擴(kuò)大貼圖區(qū)所占的面積。
    語(yǔ)法：`border-image-ouset: [ |  ]{1,4}`
    屬性值的順序和簡(jiǎn)寫(xiě)時(shí)語(yǔ)法擴(kuò)展的規(guī)則與屬性`border-image-width`一致(top,right,bottom,left)，而其含義為將貼圖區(qū)各邊(top/right/bottom/left)向外擴(kuò)展多大距離。
    **``**:設(shè)置距離各邊的絕對(duì)距離，負(fù)數(shù)無(wú)效。
    **``**:以對(duì)應(yīng)的border-width為參考系，設(shè)置距離各邊的距離。**默認(rèn)值為0**

注意
?通過(guò)border-image-outset擴(kuò)大貼圖區(qū)的面積時(shí)，若border-image-width采用作屬性值，則同時(shí)擴(kuò)大除middle區(qū)域外其他區(qū)域的尺寸；當(dāng)border-image-width采用其他作屬性值時(shí)，只會(huì)看到圖片邊框向外移動(dòng)而已。

?經(jīng)過(guò)上述兩步"圖片切片"和"貼圖區(qū)切片"后，是時(shí)候?qū)烧唪酆显谝黄鹆恕＞唧w邏輯如下：

初次調(diào)整圖片切片尺寸

1.1. 將素材圖片各切片移至貼圖區(qū)中對(duì)應(yīng)的區(qū)域
1.2. top/bottom圖片切片的高度縮放至于對(duì)應(yīng)的貼圖區(qū)域的高度一致，并以相同的縮放比來(lái)調(diào)整圖片切片的寬度;
1.3. left/right圖片切片的寬度縮放至于對(duì)應(yīng)的貼圖區(qū)域的寬度一致，并以相同的縮放比來(lái)調(diào)整圖片切片的高度;
1.4. top-left/right和bottom-left/right圖片切片的寬度和高度則各自縮放至于對(duì)應(yīng)的貼圖區(qū)域一致即可

深度調(diào)整圖片切片尺寸

2.1. 根據(jù)`border-image-repeat`屬性值對(duì)切片尺寸進(jìn)行調(diào)整。

定位切片

3.1. 當(dāng)`border-image-repeat`屬性值為repeat時(shí)，切片位于對(duì)應(yīng)貼圖區(qū)域的中央位置，否則則緊貼對(duì)應(yīng)貼圖區(qū)域的左邊框。

3秒の合體:)，即根據(jù)border-image-repeat屬性值對(duì)切片進(jìn)行復(fù)制、拉伸等平鋪操作，然后將貼圖區(qū)與目標(biāo)元素所在的圖層進(jìn)行合成即可！

?合成過(guò)程中有兩點(diǎn)是至關(guān)重要的：

"初次調(diào)整圖片切片尺寸"是基礎(chǔ)，而且要注意的是，是以相同的縮放比來(lái)調(diào)整圖片，而不是直接讓圖片切片的尺寸與對(duì)應(yīng)的貼圖區(qū)域尺寸一致；

"深度調(diào)整圖片切片尺寸"、"定位切片"和平鋪方式均與border-image-repeat相關(guān)。

?語(yǔ)法：border-image-repeat: [stretch | repeat | round | space]{1,2}
?第一個(gè)屬性值為水平方向的平鋪方式，第二個(gè)屬性值為垂直方向的平鋪方式。
?stretch:拉伸圖片切片，默認(rèn)值。
?repeat:復(fù)制平鋪圖片切片(不保證每幅圖片切片副本恰好能完整顯示)。
?round:根據(jù)貼圖區(qū)域尺寸調(diào)整圖片切片尺寸，然后復(fù)制平鋪圖片切片，從而保證每幅圖片切片副本恰好能完整顯示。
?space:復(fù)制平鋪圖片切片，并通過(guò)調(diào)整圖片切片副本間的空白，從而保證每幅圖片切片副本恰好能完整顯示。(效果和flexbox中content-align設(shè)置為space-round差不多)

素材圖片原尺寸：

最終效果：

大家可以看到最終效果里面4個(gè)角落的切片均縮小了，而left和right則是拉伸，top和bottom則是復(fù)制平鋪。

?粵語(yǔ)的"一鋪搞定"其實(shí)就是一次完成全部工作的意思，上面關(guān)于border-image的屬性，要是每次都逐個(gè)設(shè)置那要敲多少次鍵盤(pán)啊。。。其實(shí)我們可以通過(guò)border-image屬性一次搞定。
?語(yǔ)法：border-image: <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || <‘border-image-repeat’>

?粵語(yǔ)的"一鋪清袋"其實(shí)就是把之前的成果一次性歸零。當(dāng)我們辛辛苦苦設(shè)置好border-image后，一個(gè)不小心又設(shè)置了border屬性，那么之前關(guān)于border-image的設(shè)置將全部失效。因此先設(shè)置border屬性，然后再設(shè)置border-image最為穩(wěn)妥。

?總算折騰出來(lái)了，累啊?。?！起初以為花2個(gè)晚上就能理解好并記錄下來(lái)，誰(shuí)知道理解就花了2晚，然后各種試驗(yàn)。。?？磥?lái)還是太高估了自己了:(不過(guò)不管如何，弄明白后還是覺(jué)得很爽的哦！
?尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來(lái)自：http://www.cnblogs.com/fsjohnhuang/p/5449717.html^_^肥仔John

CSS Backgrounds and Borders Module Level 3 4. Borders
《圖解CSS3核心技術(shù)與案例實(shí)戰(zhàn)》——第3章 CSS3邊框