CSS3 border-image 屬性

CSS3 border-image 屬性可以讓網頁元素的邊框用圖片表示，通常應用在 DIV 區塊上，當然 border-image 也可以應用在其他元素上，例如網頁按鈕邊框也行，但是最常用到 border-image 屬性還是 DIV 區塊。傳統的 CSS 設計要在 DIV 區塊增加圖片邊框效果並不容易，當 CSS 技術發展到 CSS3 時，透過 border-image 屬性卻可以很輕易的替 DIV 區塊加上圖片邊框，這樣一來要增添豐富的視覺效果就更加容易了。

儘管 CSS3 border-image 屬性相當的便利，也受到大部份主流的瀏覽器支援，但是舊版的 IE 瀏覽器並不支援 CSS3 border-image 屬性，直到新版的 IE 11 才開始支援，所以在使用 border-image 屬性時，請仔細考量設計出來的網頁瀏覽族群。

CSS3 border-image 屬性整合語法
 border-image: source slice width outset repeat|initial|inherit;
CSS3 的 border-image 屬性整合寫法有很多不同的項目，分別用來設定圖片來源網址、圖片切割、圖片寬度、與邊框的關係以及圖片的填滿方式，這種整合寫法有點類似 border 屬性，當然這些項目也都可以拆開來寫，整理如下。

CSS3 border-image 屬性的各種語法
值
說明
border-image-source
圖片來源網址。
border-image-slice
將要使用的圖片邊框分割為九格，分別抓出四個角的圖片。
border-image-width
設定圖片邊框的寬度。
border-image-outset
邊框圖片超出邊框的量。
border-image-repeat
設定圖片的填滿方式，有三種常用參數。
  • round - 用重複方式填滿，有縮放圖片功能*。
  • repeat - 用重複方式填滿。
  • stretch - 用延展方式填滿。
* round 在無法用整數倍數填滿的時候，會用整數倍數縮放圖片再填滿。

CSS3 border-image 屬性範例一、以 round 方式填滿
<style>
div{
    border:20px solid transparent;
    width:330px;
    padding:20px;
}
#DIV1{
    -moz-border-image:url(圖片網址) 30 30 round;    /* 給 Firefox 看*/
    -webkit-border-image:url(圖片網址) 30 30 round;    /* 給 Safari 與 Chrome 看*/
    -o-border-image:url(圖片網址) 30 30 round;        /* 給 Opera 看*/
    border-image:url(圖片網址) 30 30 round;
}
</style>
<p>原始圖片</p>
<img src="圖片網址">
<p>將原始圖片套用至 DIV 邊框</p>
<div id="DIV1">以 round 方式填滿</div>
範例的效果
以 round 的方式填滿 DIV 區塊的邊框，可以看到四個角依然是使用藍色的方塊，其餘的線條則都用黃色圓形填滿，而且黃色圓形是重複的出現，原始的圖片其實並不小張，可是我們在一開始有設定 DIV 的邊框尺寸以及寬度，所以 border-image 屬性會根據我們設定好的 DIV 區塊的邊框來呈現最終的圖片邊框效果。這裡稍微注意一下，DIV 的 border 設定中，有一個 transparent 是讓原本的邊框變透明，這樣才能顯示圖片邊框的效果，否則圖片會被原本的邊框蓋掉而失效，這也是使用 border-image 屬性的一個必要技巧。

CSS3 border-image 屬性範例二、以 repeat 方式填滿
<style>
div{
    border:20px solid transparent;
    width:330px;
    padding:20px;
}
#DIV1{
    -moz-border-image:url(http://www.wibibi.com/upload/20150113225637.png) 30 30 repeat;    /* 給 Firefox 看*/
    -webkit-border-image:url(http://www.wibibi.com/upload/20150113225637.png) 30 30 repeat;    /* 給 Safari 與 Chrome 看*/
    -o-border-image:url(http://www.wibibi.com/upload/20150113225637.png) 30 30 repeat;        /* 給 Opera 看*/
    border-image:url(http://www.wibibi.com/upload/20150113225637.png) 30 30 repeat;
}
</style>
<div style="font-size:15px;">
<p>原始圖片</p>
<img src="http://www.wibibi.com/upload/20150113225637.png">
<p>將原始圖片套用至 DIV 邊框</p>
<div id="DIV1">以 repeat 方式填滿</div>
</div>
範例的效果
範例二採用 repeat 的方式填滿 DIV 區塊的邊框，有注意到轉角處的黃色圓形與藍色方形交界處的變化嗎？黃色圓形並不是完美的圓，而是有部份被藍色的方形檔住了，那是因為 repeat 採用的是重複填滿，所以邊框上的許多黃色圓形重複到轉角就被蓋住，圓形並不會自己縮放，可以看出 repeat 的效果與範例一的 round 有很大的差別。

CSS3 border-image 屬性範例三、以 stretch 方式填滿
<style>
div{
    border:20px solid transparent;
    width:330px;
    padding:20px;
}
#DIV1{
    -moz-border-image:url(圖片網址) 30 30 stretch;    /* 給 Firefox 看*/
    -webkit-border-image:url(圖片網址) 30 30 stretch;    /* 給 Safari 與 Chrome 看*/
    -o-border-image:url(圖片網址) 30 30 stretch;        /* 給 Opera 看*/
    border-image:url(圖片網址) 30 30 stretch;
}
</style>
<div style="font-size:15px;">
<p>原始圖片</p>
<img src="圖片網址">
<p>將原始圖片套用至 DIV 邊框</p>
<div id="DIV1">以 stretch 方式填滿</div>
</div>
範例的效果
範例三採用的是 stretch 的延展方式填滿 DIV 區塊邊框，我們可以很清楚的看出 stretch 的效果與前面兩個 round 及 repeat 差異甚大，因為 stretch 直接將原始圖片中的黃色圓形延展為長條形，效果是不是也相當不錯呢？

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012