重新訪問CSS邊界圖像

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

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

border-image財產的潛力使我興奮。即使在表格中，它也可以使圖像集成到元素邊界中（除非應用邊框崩潰）。

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

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

border-image屬性和價值：快速刷新

大多數解釋始於這種常見的速記：

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

但是，了解單個屬性更簡單。

圖像源

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

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

對於SVG，存在幾個選項：外部文件：

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

數據URI（儘管SVG和HTML的XML性質較少推薦）：

 <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之上呈現，但在內容之下。）

切片圖像

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

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

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

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

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

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

或單個值（順時針：上，右，底部，左）：

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

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

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

相應地設置邊界寬度：

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

中心填充

中心通常被忽略，但fill關鍵字利用它：

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

重複

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

• stretch ：伸展平穩。
• repeat ：重複紋理圖像。
• round ：重複整個零件，調整圖像的大小。
• space ：重複整個零件，添加空間。

單個邊緣設置是可能的：

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

啟動

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

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

或指定個人銷售：

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

實踐中border-image ：Mike Worth的網站

邁克·沃思（Mike Worth）的網站受到90年代動畫的啟發，使用了border-image以實現效率和視覺影響。

裝飾按鈕

使用SVG和border-image創建了Stone平板電腦風格的按鈕：

 <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>

文章滾動

使用單個SVG和border-image實現了紙滾動效果，避免了偽元素：

 <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>

結論

border-image是有效地創建具有視覺驚人設計的強大工具。應更廣泛地探索其潛力。邁克·沃思（Mike Worth）的網站展示了其創建複雜邊界，裝飾元素和動態覆蓋的能力。嘗試border-image以增強您的設計。

（注意： Mike Worth的網站於2025年4月啟動；可用Codepen示例。）

關於安迪·克拉克

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

以上是重新訪問CSS邊界圖像的詳細內容。更多資訊請關注PHP中文網其他相關文章！