我上一篇文章“重新訪問CSS多列佈局”指出，自從我的第一本書《超越CSS 》出版以來已經(jīng)過去了近二十年。本書探索了當(dāng)時(shí)的新聞CSS屬性及其應(yīng)用程序。十年後，基於此建造的五週年紀(jì)念版五週年版，引入了border-image屬性。

（注意：已更新的，可以自由使用的在線版本，超越CSS進(jìn)行了重新訪問，存在。我的書店可從我的書店使用hardboiled的Web Design 。）

border-image財(cái)產(chǎn)的潛力使我興奮。即使在表格中，它也可以使圖像集成到元素邊界中（除非應(yīng)用邊框崩潰）。

儘管經(jīng)常使用， border-image仍未得到充分利用。它的尷尬語法要怪嗎？也許對實(shí)踐創(chuàng)造性實(shí)現(xiàn)的解釋不足？可能兩者。

最近在艾美獎(jiǎng)的遊戲作曲家邁克·沃思（Mike Worth）的網(wǎng)站上的最新工作是一個(gè)圖形豐富的項(xiàng)目，廣泛展示了border-image 。

border-image屬性和價(jià)值：快速刷新

大多數(shù)解釋始於這種常見的速記：

 <code>border-image: \[source\] [slice]/\[width]/[outset\] [repeat]</code>

但是，了解單個(gè)屬性更簡單。

圖像源

首先，定義圖像源（位圖，向量或CSS梯度）：

 <code>border-image-source: url('/img/scroll.png');</code>

對於SVG，存在幾個(gè)選項(xiàng)：外部文件：

 <code>border-image-source: url('/img/scroll.svg');</code>

數(shù)據(jù)URI（儘管SVG和HTML的XML性質(zhì)較少推薦）：

 <code>border-image-source: url('data:image/svg xml;base64,…');</code>

直接嵌入SVG代碼（避免額外的HTTP請求）：

 <code>border-image-source: url('data:image/svg xml;utf8,…');</code>

或者，使用CSS梯度：

 <code>border-image-source: conical-gradient(…);</code>

（提示：記?。?border-image在背景和box-shadow之上呈現(xiàn)，但在內(nèi)容之下。）

切片圖像

指定源後，切片將圖像劃分以放置在邊界的九個(gè)區(qū)域中。這通常使新來者感到困惑。

雖然簡單的等級(jí)切片很常見， border-image處理複雜形狀。無形的切割線將圖像分為九個(gè)部分，類似於圖形編輯器中的切片指南。

border-image-slice定義了切片大小，指定了距每個(gè)邊緣的距離。這可能是一個(gè)值：

 <code>border-image-slice: 65</code>

頂部/底部和左/右值組合：

 <code>border-image-slice: 115 65;</code>

或單個(gè)值（順時(shí)針：上，右，底部，左）：

 <code>border-image-slice: 65 65 115 125;</code>

左上圖的圖像部分轉(zhuǎn)到左上角，依此類推。位圖圖像假設(shè)像素單元； SVG受益於明確的高度和寬度：

<code><svg height="600px" width="600px"> …</svg></code>

相應(yīng)地設(shè)置邊界寬度：

 <code>border-image-width: 65px 65px 115px 125px;</code>

中心填充

中心通常被忽略，但fill關(guān)鍵字利用它：

 <code>border-image-slice: 65px 65px 115px 125px fill;</code>

重複

控製圖像如何沿邊緣重複或伸展：

• stretch ：伸展平穩(wěn)。
• repeat ：重複紋理圖像。
• round ：重複整個(gè)零件，調(diào)整圖像的大小。
• space ：重複整個(gè)零件，添加空間。

單個(gè)邊緣設(shè)置是可能的：

 <code>border-image-repeat: stretch round;</code>

啟動(dòng)

使用邊框圖像庫將圖像擴(kuò)展到border-image-outset以外：

 <code>border-image-outset: 10px;</code>

或指定個(gè)人銷售：

 <code>border-image-outset: 20px 10px;</code>

實(shí)踐中border-image ：Mike Worth的網(wǎng)站

邁克·沃思（Mike Worth）的網(wǎng)站受到90年代動(dòng)畫的啟發(fā)，使用了border-image以實(shí)現(xiàn)效率和視覺影響。

裝飾按鈕

使用SVG和border-image創(chuàng)建了Stone平板電腦風(fēng)格的按鈕：

 <code>button { border-image-repeat: stretch; border-image-slice: 10 10 10 10 fill; border-image-source: url('data:image/svg xml;utf8,…'); border-image-width: 20px; }</code>

文章滾動(dòng)

使用單個(gè)SVG和border-image實(shí)現(xiàn)了紙滾動(dòng)效果，避免了偽元素：

 <code>article { border-image-slice: 150 95 150 95 fill; border-image-width: 150px 95px 150px 95px; border-image-repeat: stretch round; border-image-source: url('data:image/svg xml;utf8,…'); }</code>

主頁覆蓋

交互式疊加層使用的border-image在懸停在懸停上添加彩色梯度：

 <code>section:hover::before { opacity: .5; border-image: fill 0 linear-gradient(rgba(0,0,255,.25),rgba(255,0,0,1)); }</code>

結(jié)論

border-image是有效地創(chuàng)建具有視覺驚人設(shè)計(jì)的強(qiáng)大工具。應(yīng)更廣泛地探索其潛力。邁克·沃思（Mike Worth）的網(wǎng)站展示了其創(chuàng)建複雜邊界，裝飾元素和動(dòng)態(tài)覆蓋的能力。嘗試border-image以增強(qiáng)您的設(shè)計(jì)。

（注意： Mike Worth的網(wǎng)站於2025年4月啟動(dòng)；可用Codepen示例。）

關(guān)於安迪·克拉克

安迪·克拉克（Andy Clarke）是一位開創(chuàng)性的網(wǎng)頁設(shè)計(jì)師，以其創(chuàng)意和視覺上令人驚嘆的作品而聞名。他撰寫了幾本有影響力的書籍，包括超越CSS ，硬煮的網(wǎng)頁設(shè)計(jì)和網(wǎng)絡(luò)的藝術(shù)指導(dǎo)，並提供了流行的Web設(shè)計(jì)合同模板，合同殺手。

以上是重新訪問CSS邊界圖像的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！