是否想過網頁中的DIV物件總是方方正正的看起來不好看? 雖然可以透過border-radius調成圓弧或者clip-path調成多邊形狀，但有沒有遇過這種情況「我希望我的DIV能有非常酷炫的邊框，裡面可以放任何想要的東西，並且適應各種尺寸、怎麼拉伸都不會崩」呢? 這時就給大家介紹一個CSS中非常好用的功能 --- border-image，首先，我們先講解一下border-image是由什麼要素組成的
border-image-source --- 想當邊框的圖片
border-image-slice --- 定義邊框圖片要怎麼切，把圖片切成四個角落、四個邊、和一個中間區塊(重點)
border-image-width --- 定義切割後的邊框圖大小多大，想要不失真的話通常跟border-image-slice一致(重點)
border-image-outset --- 定義邊框圖片與物件邊緣的距離
border-image-repeat --- 定義自動拉伸範圍的循環方式
想要把一張圖當成邊框，就必須把它切成切成四個角落、四個邊、和一個中間區塊，除了四個角為固定尺寸以外，邊會根據寬高自動循環，從而達到怎麼拉伸都不會失真的自適應效果，我們看看這張圖
這張圖是網路上流傳很廣的典型範例，看起來很難自適應對吧? 其實只要找到固定尺寸的四個角，剩餘的地方讓它自動循環就好
如上圖，加上尺標和文字後，我們發現這張圖其實非常有規律，上下左右往內推124px就能很好的當個邊框
這裡有個很棒的調適工具：https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator
左側你可以看到slice把圖片切成了九宮格，它有四個角、四個邊、還有中間區塊，右邊則是把左圖當成邊框圖的實際效果，下面的slice、width、outset、repeat均可自由調整
這個工具內建了幾個模板圖片可以讓你了解border-image的用法及概念，讓我們把範例圖上傳到這個工具
看起來慘不忍睹對吧? 我們把slice跟width都調成124看看
恩... 這個四個角看起來是沒問題了，但為什麼右圖中間的部分看起來失真了? 是的，往下拉會發現還有個repeat-x和repeat-y這兩個屬性，目前均設為stretch，這個屬性會把邊的部分直接拉伸填滿，而不是循環填滿，
讓我們調到round看看
神奇地解決了!? round的用途就是會以循環的方式填滿邊邊，但size不合的話也會自行調整長寬，用來自適應再適合不過了
別忘了接下來再把slice的fill打勾，這樣中間的區塊也能自己填滿，不然會看到邊邊很漂亮但中間是空蕩蕩的，這樣就把這張圖很好的當作邊框了，中間的部分就看你隨便想塞什麼東西，是不是很神奇呢?
還有別忘了下面可以看調適出來的CSS長怎麼樣
好了，上面這張還只是範例圖片，我們拿一張更加不規則的圖片看看
這張是我用Figma畫出來的，當初想幫公司作個Cyber style風格的儀表板網頁，所以畫了好幾個邊框模板，不過我這業餘水平應該很多專業美術都能做更好XD
看似不規則，其實多捏一下還是可以，關鍵在於盡量把複雜的地方當角，平整的地方當邊，這樣不管多複雜的圖片，都能順利成為邊框
如果覺得上面講的過於冗長，你只要記住下面簡單的懶人包，就是：
量出四個角的長度，複雜的地方當角，平整的地方當邊，並且設定在slice跟width，然後repeat設成round就對了，這通常能應付大部分圖片的需求
