玩轉 CSS Border-Image

篇外話： 感受很是對不起我爲數很少來之不易的粉絲們，以前列的陪讀計劃，由於工做緣由被生生的摧殘掉了。你要問爲何的話？那就是太忙唄，忙到沒空寫文章的那種。不過「廣大」粉絲們放心，歪馬已經把本身想象成一隻小毛驢，努力追着前面的胡蘿蔔往前趕了。

😂 尷尬的是本文也並非陪讀系列文章，而是歪馬在進行第五章《漂亮的盒子》時，有感而發。

讀到書中介紹border-radius的內容時，提到了傳說中的九宮格技術，其相關介紹只有可憐的不到一頁。九宮格技術所使用的 CSS 屬性就是咱們今天的主角border-image。雖然這一技術確如書中所說，不多被使用了。可是歪馬忽然想起本身曾經爲了實現某個效果折騰了好久，而這恰好適合用border-image來實現。

本文將會藉助這一效果先給你們展現一下border-image的使用效果，總結並建議在哪些地方可使用border-image，最後再爲想要動手一試的大家快速講解一下相關的語法。

1、效果：如何實現一個切角的圓角矩形

好久好久之前，歪馬收到下面這樣一份設計圖(局部圖)。

切角的圓角矩形

請你必定動動手指，放大了仔細看。這四個圓角矩形切掉了一個角，造成了一個不規則的圖形，不規則圖形有一個發光的 border，border 兩側均有必定的模糊。

這時候你看會說了，這還不簡單，切四張圖，直接當背景不就好了。可是這個地方還有個額外的要求就是每個矩形的尺寸並不固定。若是咱們簡單的用背景來實現的話，不一樣尺寸時圖片就會變形。這顯然不是牛逼的咱們所追求的。

筆者當時爲了靈活，使用了一些極其麻煩的方式實現了，而且最後還有必定的限制。這其中的麻煩，都能再寫一篇文章。因此這裏咱們就不說了，說出來還丟人。

前天晚上讀到九宮格技術時，我忽然靈光一現，當年我實現這個效果的時候爲何不用九宮格呢？是我不知道嗎？不，我是知道的。那我爲何不用呢？實際上是由於我不知道九宮格除了常規用法講解時提到的那些我壓根不會用的用法外還有哪些使用場景。

如今我能夠跟你們說border-image特別適合用於相似的四個邊角獨特，中間區域重複的場景。通常大屏類的設計可能會有不少的特殊塊，其中有一些就適合用border-image來實現。固然常規的畫框型也是適合用九宮格的。

說了這麼多，咱們仍是一塊兒來看下如何實現上面的效果吧，以右下角是切角的圓角矩形爲例。

由於筆者素材緣由，背景只能用深藍色。在有設計師的狀況下，可讓其導出一張透明的 png 圖，這樣就能夠適應任何場景了。

代碼：

.border-image-demo {
  border: 150px solid transparent;
  border-image: url(./border-image3.png) 250 repeat;
}
複製代碼

效果圖：

右下角爲切角的圓角矩形

如上，經過兩行核心代碼（在線示例），咱們就實現了設計稿上相似的效果，真的是不要太簡單。其中border用於配置邊框，border-image用於配置邊框圖像。具體的用法咱們接下來會講解。

除了上面這種效果，今天文章的題圖也是用border-image來實現的，你們感興趣的能夠看下題圖示例。

題圖效果

2、border-image 用法快速講解

首先咱們先了解一下border-image的簡寫語法，以下：<border-image-source> <border-image-slice>? <border-image-repeat>?。其中border-image-source是必須的，另外兩個值能夠省略。這是border-image比較簡單的用法，是一種縮寫形式，它能夠分解成不少單獨的屬性，下面咱們會一一講到。

接下來，歪馬會用比較簡單快速的方式講解，不會再貼出示例。你們能夠本身動動手，只有本身動手纔會印象深入喲。

注意，嘗試時，border 屬性必須同時指定，不然你可能會看不到效果。

1. border-image-source

這個屬性是用來傳入做爲邊框圖片的圖片源，全部能夠放入url()的值均可以使用，包括 SVG/Base64/CSS Gradient 等格式。

2. border-image-slice

該屬性是用來指定如何切割邊框圖片，它主要控制四條切割線對圖片進行切割，切割成 9 塊。以下圖所示，共有上右下左四條線。

border-image-slice切割效果

該屬性最多接受四個正的無單位數字或百分比。初始值爲100% 。值的順序分別對應上右下左 4 條切割線的位置。若是值少於 4 個，則某一個方向缺失的值等於對面的值。若是隻有一個值，則四邊通用。

此外該值還有一個可選的關鍵字fill參數，能夠用來保留中間區域，默認狀況下中間區域是被丟掉的。

3. border-image-repeat

該屬性能夠指定border-image除了四個切角外，每一邊上圖片的重複狀況。

最多能夠指定兩個值。若是隻有一個值，則用於所有邊，若是兩個值則第一值控制水平邊，第二個值控制垂直邊。

主要支持下面幾個關鍵字，其中瓦片是指border-image-slice切割下來的圖片塊：

1. `stretch`：拉伸充滿
2. `repeat`：重複，會切割瓦片，有不完整的瓦片
3. `round`：避免切割瓦片，除非正好，纔會重複
4. `space`：重複瓦片，若是不能充滿則留有間距
複製代碼

4. border-image-outset

這個屬性是用來指定邊框圖像區域超出邊框框的距離，默認值爲 0。至關於把圖像邊框往外挪。

4. border-image-width

該屬性用於指定邊框圖片寬度，支持百分比、無單位的值、auto。最多也能夠接受 4 個值，值的複用邏輯與上面的相似。其中無符號單位是乘以border-width做爲最終的寬度。

這個屬性能夠和配合border-image-outset一塊兒使用實現一個原始邊框較小，不影響原始框內內容顯示的盒子。以下圖所示：

border-image-width與border-image-outset配合

上圖爲 Chrome 下的截圖效果，黃色區域爲margin區域，其內側很細的是我設定的4px的border。而後經過border-image-width與border-image-outset向外移動了圖片邊框，能夠對原始盒子影響較小。

3、總結

本文以一個真實的設計稿爲例，給你們引入了border-image的實際應用場景，但願你們之後在遇到相似場景時，能夠想起這一技術。而後，歪馬又快速帶你們過了一遍相關的屬性。

相信經此一文，你不只知道了用在哪裏，也知道了如何用。

最後，不明白的地方動起手來試一試吧。

參考連接

1. Understanding border-image
2. CSS 屬性之 border-image

---

若是你喜歡，歡迎掃碼關注個人公衆號，我會按期雲陪讀，並分享一些其餘的前端知識喲。