當用圖片做邊框時，還要考慮到一個問題，如何適應邊框的寬高變化，并且圖片不變形？本文深入解析 CSS border-image，用圖片打造個性化邊框。下圖的效果就是利用border-image屬性實現的圖片邊框自適應。
本文將border-image原理、如何切圖、css代碼都展示出來，一文看懂！仔細看完，希望能幫到你！
?一、什么是 border-image？
?border-image 是 CSS3 引入的高級邊框屬性，允許使用圖片替代傳統的線條邊框，實現復雜的視覺效果（如花紋邊框、可縮放圖標邊框等）。其核心原理是將一張圖片切割成9個區域（類似九宮格），分別對應元素的4個角、4條邊和中心區域，再將這些區域分配到元素的邊框和背景位置，從而實現靈活的邊框設計。
一定要仔細看后面的案例3、案例4，看不明白回來繼續看這里的切圖！！！！！！
二、border-image 核心屬性與原理 ?
border-image 是一個簡寫屬性，包含以下5個子屬性（按順序）： ?
css
border-image: source slice width outset repeat;各屬性含義如下：
1. border-image-source：指定邊框圖片的來源 ?
值：url(圖片路徑) 或 linear-gradient(漸變)（CSS3支持漸變作為邊框）。 ?
示例： ?
? css
border-image-source: url('border.png'); /* 引用外部圖片 */border-image-source: linear-gradient(45deg, red, blue); /* 漸變邊框 */2. border-image-slice：切割圖片為9個區域 ?
原理：將圖片按指定數值或百分比切割成上、右、下、左四條分割線，形成九宮格（如下圖）。
?
以這張圖為例，在項目頁面，確定好四個角的切割尺寸，對應上、右、下、左的順序，數值分別是：94px、130px、61px、154px。
值： ?
? 數值：1-4個數值（單位：px 或無單位，無單位時視為「像素」），分別對應上、右、下、左四條切割線距離圖片邊緣的距離。 ?
? ? css
? ? border-image-slice: 30; /* 四邊均切割30px */border-image-slice: 20 15 30 10; /* 上20px，右15px，下30px，左10px */?百分比：基于圖片自身尺寸的百分比切割。 ?
? ? css
border-image-slice: 10%; /* 四邊均切割10% */注意： ?
? 切割線數值需小于圖片尺寸，否則可能導致區域重疊或丟失。 ?
? 若數值后加 fill，則中心區域（第5塊）會被保留并作為背景顯示（默認不保留）： ?
? ? css
border-image-slice: 30 fill; /* 保留中心區域 */3. border-image-width：設置邊框寬度 ?
作用：定義邊框圖片的顯示寬度，決定切割后的區域如何縮放適應元素的邊框。 ?
值： ?
? 數值：1-4個數值（單位：px、%、em等），對應四邊寬度。 ?
? ? css
? ? border-image-width: 10px; /* 四邊寬度均為10px */border-image-width: 20px 15px; /* 上下20px，左右15px */?關鍵詞： ?
? ? border-box：寬度等于元素的 border-width（需先設置 border-width）。 ?
? ? content-box：寬度基于元素內容區域計算。 ?
示例： ?
? css
? border-width: 30px; /* 必須先設置border-width */border-image-width: border-box; /* 邊框寬度與border-width一致 */4. border-image-outset：設置邊框外擴距離 ?
作用：使邊框圖片向元素外部延伸指定距離（類似“投影”效果，但圖片會超出元素邊界）。 ?
值：1-4個數值（單位：px、%等），正數表示向外延伸，負數表示向內收縮。 ?
? css
? border-image-outset: 5px; /* 四邊外擴5px */5. border-image-repeat：控制邊框圖片的重復方式 ?
作用：定義4條邊的圖片區域如何重復或拉伸以填滿邊框。 ?
值： ?
? 平鋪（repeat）：圖片區域重復排列（可能出現接縫）。 ?
? 拉伸（stretch）：圖片區域拉伸至填滿邊框（可能變形）。 ?
? ?round：智能平鋪，自動縮放圖片使邊緣無縫銜接。 ?
? ?space：平鋪時在圖片間添加空白，避免拉伸變形。 ?
示例： ?
? css
? border-image-repeat: repeat; /* 四邊均平鋪 */border-image-repeat: stretch round; /* 上下拉伸，左右智能平鋪 */三、實戰案例：從基礎到進階 ?
案例1：基礎邊框圖片（單一邊框）
?
需求：用一張帶邊框的圖片（如 上圖）作為元素邊框，四邊切割30px，寬度自適應。 ?
（圖片尺寸：72px×72px，四周24px為邊框圖案，中心24px×24px為透明） ?
HTML： ?
htm
<div class="box">中間</div>CSS： ?
css
.box {width: 300px;height: 200px;border: 24px solid transparent; /* 必須設置border-width，顏色設為透明 */border-image: url('border.png') 30 stretch; /* 切片24px，拉伸顯示 */
}效果： ?
圖片四邊的24px區域作為邊框，中心區域透明（因未加 fill）。 ?
邊框隨元素尺寸自動拉伸（stretch 導致圖片變形）。
案例2：平鋪邊框（避免拉伸變形） ?
需求：使用花紋圖片作為邊框，平鋪顯示避免變形。 ?
CSS： ?
css
.box {border: 24px solid transparent;border-image: url('pattern-border.png') 24 repeat; /* 切片24px，平鋪 */
}效果： ?
邊框圖片以24px為單位平鋪，花紋重復排列，無拉伸變形。
案例3：自定義四邊樣式（不同切片與重復方式）
?
需求：上下邊框使用拉伸效果，左右邊框使用平鋪效果。? 如下圖
CSS： ?
.box {width: 400px;/* 寬度可以改變 */height: 50px;/* 高度可以改變 */border:40px solid transparent; /* 必須設置，顏色設為透明 */border-image: url('./images/border.png') 94 130 61 154 / 94px 130px 61px 154px stretch repeat;/* 切片：上94px,右130px，下61px，左154px */
}解析：
- ?94 130 61 154：上切割94px，右切割130px，下切割61px，左切割154px。 ?
- / 94px 130px 61px 154px：border-image-width 的簡寫，上高94px，右寬130px，下高61px，左寬154px。 ?
- stretch repeat：上下邊框拉伸，左右邊框平鋪。
案例4：保留中心區域（作為背景）
?需求：邊框圖片的中心區域作為背景顯示（如帶紋理的卡片）。
?CSS： ?
.box {width:400px;height: 100px;border: solid transparent;border-image:url(./images/border3.png) 46 224 32 31 fill;/* 加fill保留中心區域 */border-width: 46px 224px 32px 31px;background-color: f0f0f0; /* 中心區域背景色（可選） */
}效果：
?
中心區域（原圖片中間部分）作為背景填充元素內部，與邊框無縫銜接。
四、注意事項與最佳實踐 ?
1. 必須先設置 border-width： ?
? ?border-image 依賴 border-width 確定邊框尺寸，否則無法顯示。 ?
2. 瀏覽器兼容性： ?
? ?現代瀏覽器（Chrome/Firefox/Safari）均支持，IE11+ 部分支持（需加 -ms前綴）。 ?
3. 性能優化： ?
? ?優先使用 SVG 圖片（矢量圖）作為邊框，避免拉伸模糊。 ?
? ?復雜邊框可拆解為多個簡單圖層，減少 border-image 的計算量。 ?
4. 與其他屬性配合： ?
? ?box-sizing: border-box：確保邊框圖片不影響元素尺寸計算。 ?
? ?background-clip: padding-box：調整背景顯示范圍，避免與邊框沖突。 ?
五、常見問題解答
?Q：邊框圖片不顯示怎么辦？ ?
? A：檢查是否設置了 border-width，且 border-color 不為 transparent（除非需要透明邊框）。 ?
Q：圖片拉伸變形嚴重如何處理？ ?
? A：使用 repeat 或 round 替代 stretch，或切分更小的重復單元圖片。 ?
Q：如何讓邊框圖片覆蓋背景？ ?
? A：通過 z-index 或 position 調整元素層級，或使用 background-clip 控制背景顯示區域。 ?
六、總結：border-image 的應用場景 ?
- 自定義按鈕邊框：如帶圖標或花紋的可縮放按鈕。 ?
- 卡片設計：為卡片添加帶紋理的邊框和背景。 ?
- 分割線/裝飾線：用圖片實現復雜樣式的分隔線。 ?
- 響應式設計：通過九宮格切片實現邊框圖片隨元素尺寸自適應。 ?
小伙伴們，看到這里，你讀懂了嗎？動手實踐一下，給我點個贊吧！
通過靈活組合 border-image 的各屬性，能輕松打破傳統邊框的限制，為設計注入更多創意！
