前言

邊框，在界面設計中是挺重要的，它不僅定義了界面元素的物理邊界，還可以影響用户的視覺感知，幫助用户區分不同的界面元素，起到視覺分隔、焦點引導、裝飾美化、保持一致等作用

那麼，在前端開發中，如何實現邊框捏？

是的，只要給你的元素加上這一條樣式，你的元素就擁有了邊框，但是你會發現，這是一個實線邊框，如果我想實現其它邊框呢？只需要修改中間的solid值即可，可選值如：dashed、dotted、double、groove等，可實現如：虛線、點線、雙實線、雕刻等效果邊框

但是，如果有一天，UI跟你説：“我想實現一個花圈邊框”，那怎麼辦呢？

把UI打一遍？ 當然不是

前端無法實現嗎？當然不是

這時候就要提到一個CSS屬性了(鋪墊這麼多)，主角登場—border-image🎉

什麼是border-image

思考一下，如何實現花式邊框？

很容易想到的是用圖片，那怎麼用圖片呢？設為背景圖片？這樣倒是可以實現，但這樣很不靈活，一旦元素與設計發生出入，如比例變化，圖片就會被拉伸，如下

同樣的素材和示例，用border-image實現的話，就比較優雅，也不會被拉伸

一句話介紹，border-image就是在給定元素的邊框區域以規定規則繪製圖像的屬性

屬性拆解

與background等屬性類似，borde-image也是一個簡寫屬性，可細分為以下5個子屬性

◆border-image-source：決定邊框用什麼圖

◆border-image-slice：決定圖片怎麼切割，採用“九宮格”原理

◆border-image-width：決定邊框寬度(或者説厚度)

◆border-image-outset：決定是否往外擴展(即超出邊框盒)或向外擴展的大小

◆border-image-repeat：決定邊框填充方式，如拉伸、平鋪還是縮放

通過對這5個子屬性賦值，從而確定一張圖片將如何繪製在邊框區域內

border-image-source

該屬性用於指定將要繪製在邊框區域的圖片資源

可接受none或CSS合法的圖片引用，如url()或漸變等

如果沒有設置border-image-source或圖片加載失敗，則會渲染border-style定義的樣式

border-image-slice

該屬性可以説是border-image中最核心的屬性了，基本語法如下：

其合法的值可以為數字(不帶單位)或百分比

• • 當值為數字時，如果圖片資源為位圖，則表示像素點數量(即單位為像素)；如果圖片資源為矢量圖，則由矢量圖的元素大小決定(如SVG的width、height屬性)
• • 當值為百分比時，則表示相對於圖片自身寬高的百分比

它的作用就是規定如何切割圖像資源，將其繪製到邊框區域

其通過4條切片線，將圖像分割為9個區域：四個角、四個邊以及中心區域，大致如下：

如上圖所示，圖片會被分為以上9個區域，屬性則通過指定top、right、bottom、left這4個關鍵值來確認每個區域的大小，然後將各個區域一一繪製在邊框區域的對應位置；中間區域一般不會渲染，除非你使用了fill關鍵字

與padding或margin等屬性類似，border-image-slice也可以有多種寫法

• • 指定一個值時，即上下左右都一樣大
• • 指定兩個值時，第一個表示上下，第二個表示左右
• • 指定三個值時，第一個表示上，第二個表示左右，第三個表示下
• • 指定四個值時，分別表示上、右、下、左
• • 包含fill時(可選)，則中間區域會保留(填充到元素的內容區域，相當於元素的一個背景，會堆疊在background之上，即會擋住背景)，該關鍵字一般需寫在數值屬性值的末尾

使用效果大致如下

border-image-width

該屬性用於控制圖片邊框最終繪製的“厚度”，即決定邊框有多寬；基本語法如下

可寫 1 ~ 4 個值(規則同 padding / margin)，默認值為1

屬性的合法值包括：

• • 長度值(px, em, …)：直接指定邊框具體厚度

• • 百分比(%)：相對於元素寬高的比例值

• • 數字：表示相對於border-width的倍數

• • auto：如果有指定slice屬性值，則等同於對應的slice值；如果沒有指定slice值，則由瀏覽器計算決定(不同瀏覽器實現可能不同，實際測試主流的瀏覽器會在四個角用圖片資源儘可能的佔滿元素)；所以為了效果確定，最好還是指定具體值，同時保證slice屬性有值

注意：

在使用中，可能會遇到border-image-width比border-width大的情況，即邊框圖像的寬度大於邊框寬度，此時，邊框圖像繪製時除了佔滿邊框區域，超出部分會向內延伸，佔據內容區域

border-image-outset

該屬性用於指定邊框圖像相對於元素的邊框區域向外擴展的距離，即元素不侷限於元素本身的大小，而是可以向外擴展

可以理解為擴展了邊框圖像的繪製區域；基本語法如下：

可寫 1 ~ 4 個值(規則同 padding / margin)

合法的值類型如下：

• • 長度值(帶單位，如px, em等)，明確表示擴展多大
• • 數字，表示按照border-width的倍數進行擴展

注意：

該屬性會向外擴展邊框圖像的繪製區域，導致邊框圖像繪製到元素外，但實際不會撐大元素本身的大小，只是視覺上邊框“往外冒”

border-image-repeat

該屬性用於指定邊框圖像切片在元素邊框上如何填充，如平鋪或拉伸等；基本語法如下：

• • 寫一個值，表示所有邊框的填充規則
• • 寫兩個值，第一個值控制水平邊框，第二個值控制垂直邊框

值含義如下：

• • stretch：(默認值)拉伸，切片會被強行拉伸，以填滿對應的邊框區域
• • repeat：重複平鋪，切片會按照原始大小直接平鋪，超出邊框長度時截斷
• • round：平鋪加縮放湊整，類似repeat，但會自動縮放切片，讓它們剛好整數次鋪滿，而非截斷
• • space：平鋪加均勻留白，切片保持原始大小，不縮放，如果區域最後不夠整數次平鋪時，就會在切片之間均勻分配空隙

瞭解了上側特點，在選取邊框圖像資源時，可以儘量選擇可無縫循環的，效果會更優

🎯常見使用場景

☀不規則虛線/點線/波浪線/鋸齒線等效果

☀可伸縮的 UI 元素，如聊天軟件的氣泡皮膚、2D遊戲地圖、對話框等

☀漸變或動效邊框

☀代替複雜的切圖(四角+四邊切圖拼接)，只需一張圖就能搞定

⚠️注意事項

★必須先定義border值才能顯示圖像邊框，如果你無誤地寫了border-image，但border: none;，那圖像邊框也不會顯示；且border-width至少要大於零，否則如果你沒有指定border-image-width值，那麼其默認就為border-width的大小，即零，也會導致圖像邊框似乎無效

★會覆蓋常規邊框，一旦定義了border-image，將會覆蓋掉原本的border-style和border-color的效果；如果邊框圖像資源加載失敗或錯誤，則會回退回原本的style、color邊框效果

★使用border-image，會導致border-radius圓角失效，邊框圖像是按矩形繪製的，不會跟隨圓角切割；如果需要圓角，可以直接在邊框圖像資源上體現

★如果border-image-width大於border-width，邊框會往內侵入內容區域，不會被裁掉

★border-image-outset只往外擴，不會改變元素大小，不會影響元素的佈局尺寸，但可能會蓋住相鄰元素，需要留意

總結

你，學廢(會)了嗎ヽ(゜Q。)ノ？