用CSS邊框影像讓你的網站更漂亮

本文由碼農網 – 葉露原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

不久之前，新增一些裝飾性元素，例如給網頁中的圖片新增花哨的邊，以及耐心調整CSS檔案才能使你的網頁看起來不錯。然而現在CSS已經做出了改變，用複雜的邊框裝飾你的網站只需幾行程式碼。這篇文章將告訴你如何做到！

邊框屬性（Border Image Properties）

最普通的方法去設計邊框就是使用預設的邊框樣式屬性值。包括： dotted, dashed,solid, double, groove, ridge, inset, 和 outset。這些樣式已經給了你不少選擇。但是你可以更進一步使用接下來的CSS屬性去增加吸引人的背景圖片到你的邊框。

border-image-source 屬性

使用這個屬性，你可以分配一個背景圖片到element的邊框中。這個值常常是圖片的URL：

element {
  border-image-source: url('myimage.png');
}

你會發現CSS的漸變同樣產生效果：

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

在瀏覽器中它大概是這樣的：

如果你設定屬性值為 none，圖片將不會顯示，瀏覽器將使用屬性 border-style 的值。因此，border-style 作為一個後備選項是個不錯的主意！

值得一提的是，你使用的圖片不需要匹配邊框的寬和高，一張小圖片就可以裝飾你的網站，如例子中的element可任意調整其圖片的大小並且可以自動識別適應螢幕的尺寸。

border-image-slice 屬性

在你使用border-image-source 屬性選擇一張圖片之後，你可以應用border-image-slice 屬性。

element {
  border-image-slice: 19;
}

這個屬性規定影像上下左右的邊緣向內偏移，影像被分割成九個區域：四個角，四條邊以及一箇中間區域。

你可以規定四個數字或者百分比作為值。當你規定四個數值的時候，它應用順序為上，右，下，左。如果你省略左側偏移值，那麼左邊的值將會預設和右邊數值相同。如果你省略下方數值，它將預設與上方的相同。但如果你省略右側偏移值，它將預設與上方數值相同。如果你只使用一個數值，這個數值將會被應用在所有偏移值上。

相對於影像尺寸的百分比值－影像寬度影響水平偏移，高度影響垂直偏移。

數字值代表影像畫素或者向量座標。另，不要在數字後面加px，否則這個屬性將不會工作。

以下是如何使用 border-image-slice屬性的例子：

<div class="box">
  Border Image
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>

.box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-bg.png);
  border-image-slice: 19; 
}

使用一個 100 x 100px 大小的圖片：

最終效果圖大概是這樣：

中間區域呈現不可見的透明狀態，如果你想保留邊框影像中間部分，使用關鍵詞fill。

例如，使用一個有中間區域的圖片，如果你使用關鍵詞 fill，你將得到以上的圖片。但是如果你使用它：

.box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-fill.png);
  border-image-slice: 19 fill;
}

中間區域的圖片會出現：

雖然有點模糊，圖片看起來被壓縮，但是中間區域的圖片可視了：

border-image-width 屬性

此屬性將會繪製與所謂的突變邊界地區內部，這個邊界預設區域為border box，就像屬性border-image-slice，屬性 border-image-width 規定了內部被劃分為九個區域。

同樣的，此屬性的四個規定值可用數值或百分比代表上，右，下，左的量。百分比參考了影像區域尺寸，影像寬度影響水平偏移，高度影響垂直偏移。如果你使用數值，它的用法和 border-width是一樣的。例如：

.box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-bg.png);
  border-image-slice: 19;
  border-image-width: 3;
}

… 設定邊框（border）圖片寬為邊框寬（border-width ）值的三倍，19px。結果是這樣的：

我發現如果賦值給 border-image-width 和 border-image-slice 屬性值相同，這確保你的邊框圖片處於最佳狀態而不模糊扭曲。

border-image-outset 屬性

目前為止我已經使用預設值插入圖片與邊框圖片區域。其實你還有一個選項將邊框圖片放在border box區域的外部。這時候你可以使用 border-image-outset 屬性。

同樣的，此屬性的四個規定值可用數值或百分比代表上，右，下，左的量，得其輸出的用法和 border-width 一樣。

為了更清楚的說明，我用綠色虛線代表 border box 的區域，粉紅色的圖片代表。邊框圖片區域。在預設的情況下，邊框圖片在綠色區域中，這表示邊框圖片區域在 border box 區域裡面。

在CSS檔案里加上 border-image-outset: 19px; 粉紅色部分將位於綠色部分的外面，這表明邊框圖片位於border box 區域的外面。

要注意的是在邊界框之外的部分影像不觸發滾動（ trigger scrolling ），也不捕獲滑鼠事件（ mouse events）。

你可以在 CodePen 試一試我們已經討論過的這些屬性:

border-image-repeat 屬性

這個屬性給如何延展以及鋪排邊框影像的邊緣和中間提供了一些選擇。第一個值規定了水平邊緣（上和下），第二個值則規定了數值邊緣（左和右）。如果你只提供一個值，則此值應用於所有的邊。

可用的一些值：

• stretch – 如果你不使用 border-image-repeat 屬性的預設值。它的屬性是拉伸影像來填充區域。
• repeat – 平鋪影像填充區域。如果可用面積區域不能整除圖片區塊，圖片可以被切斷。
• round – 和 repeat 相同，但是如果可用的面積區域不能適應圖片區塊，它將自動縮放圖片直到適應為止。這導致圖片不被切斷，但是圖片可能看起來會有點變形。
• space – 和 repeat 相同，但是如果空間不能正好適應圖片，多出的空間將分佈在圖片周圍。

編寫的時候，使用火狐瀏覽器會造成 space 以及 stretch 有一樣的效果，而使用谷歌瀏覽器會造成 space 以及 repeat 擁有一樣的效果。

border-image Shorthand 屬性

將以上我們所學到的關於 border-image 屬性的單個屬性總結以下：

1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-outset
5. border-image-repeat

小例子：

element {
  border-image: url(myimage.png) 19 / 19px / 0 round;
}

在 CodePen 演示頁面上自己試一試 border-image-repeat 和 border-image 的屬性用法吧。

如果我想移除邊框圖片？

最佳方法就是使用 border Shorthand屬性重新設定邊框。使用 borderShorthand 屬性，你可以很快的重設相同寬度，相同顏色，相同樣式的四邊。無需規定 border-image:none，也無需重寫任何單獨的 border-image 屬性。

瀏覽器支援

在編寫的時候，大多數瀏覽器都支援 border-image。只有火狐不能拉伸SVG圖片，並且Opera Mini不能支援單獨使用的屬性，除非在使用時加上字首 -o-。

總結

這篇文章全部關於屬性 border-image : 它的值，如何以最好的方式使用它們，什麼瀏覽器才能支援。如果你想知道更多細節，可以查詢 CSS Backgrounds and Borders Level 3。