第 23 章 CSS3 邊框圖片效果

學習要點：

1.屬性初探

2.屬性解釋

3.簡寫和版本

主講教師：李炎恢

本章主要探討 HTML5 中 CSS3 中邊框圖片背景的效果，通過這個新屬性讓邊框更加的豐富多彩。

一．屬性解釋

CSS3 提供了一個新的屬性集合，用這幾個屬性可以嵌入圖片形式的邊框。這樣，邊框就可以自定義了。

1.border-image-source      //引入背景圖片地址
2.border-image-slice         //切割引入背景圖片
3.border-image-width       //邊框圖片的寬度
4.border-image-repeat     //邊框背景圖片的排列方式
5.border-image-outset     //邊框背景向外擴張
6.border-image               //上面五個屬性的簡寫方式

二．屬性解釋 

要實現邊框背景，我們對圖片也有一定的要求，否則效果不能完全體現出來。圖片可以通過九宮格的切分來瞭解它。我們使用 W3C 官網上教學的圖片來講解一下。

如上圖所示，九宮格並不一定要求每一個格子大小都相同。當然，如果相同的話，製作邊框背景就相對容易一點。比如如下這張圖片：

首先，用 Photoshop 軟體分析一下這個標準九宮格的總體大小和每個格子的大小。最終得出圖片總大小為 81px 正方形，四個角的大小為 27px 的正方形，其餘五個角也是 27px。

那麼，第一步：先創建一個盒子區域，大小為 400x400 的矩形。然後設置引入邊框圖像。

//引入邊框圖像

border-image-source: url(border.png);

單單隻有這句話，webkit 引擎下的瀏覽器會在盒子區塊的四個角看到一丁點圖像的影子。而其他瀏覽器什麼都看不到。這是由於沒有設置邊框背景圖像的寬度導致的。

//設置邊框圖像寬度，上右下左，可以設置四個值

border-image-width: 81px;

這裡設置的是邊框圖像的寬度，而不是邊框寬度。當你設置邊框寬度，你會發現，文本會偏移。而邊框圖像的寬度不會擠壓文本。

//設置邊框的寬度

border-width: 20px;

以上設置完畢後，支持邊框背景圖片的瀏覽器會在四個角落鋪上這張圖片的完整形式。這個時候需要通過引入切割屬性來配置背景圖片的顯示方式。

//首先，邊框圖像寬度設置為 27px 和一個單格寬高一致 

border-image-width: 27px;

//設置切割屬性的大小 

border-image-slice: 27;

這裡的 27 不需要設置 px 像素，因為它預設就是像素。設置 27 之後，我們會發現邊框的四個角正好是橘紅色的四個角。那麼你可以逐步放大或逐步放下這個值，來體驗一下它的變化。

//從 27 逐步放大到 81，四個角都慢慢縮小，各自顯示一個完整的圖像

border-image-slice: 81;

//從 27 逐步縮小到 0，發現四個角都慢慢變大，配合 fill 整體顯示一個完整圖像

border-image-slice: 0 fill;

上面只是單獨設置了一個像素表示四個邊切割的大小，你也可以設置百分比、浮點值或者分別設置四個變的大小。

//33.5%差不多 27

border-image-slice: 33.5%;

//上下設置 27，左右設置 0

border-image-slice: 27 0;

如果想讓邊框背景向外擴張，那麼可以進行擴張設置。

//向外擴張 20px，也可以是浮點值，比如 2.2

border-image-outset: 20px;

四個角設定好之後，我們要設定四個變的顯示排列方式。使用 border-image-repeat 屬性，有四個值提供使用，分別如下表：

//拉伸方式填充，當然，通過上右下左設置四個邊均可

border-image-repeat: stretch;

//平鋪填充，超過則被截斷

border-image-repeat: repeat;

//平鋪填充，動態調整圖片大小直至鋪滿

border-image-repeat: round;

//平鋪填充，動態調整圖片的間距直至鋪滿 

border-image-repeat: space;

//另一個按鈕的小例子 

div {
    width: 400px;
    height: 40px;
    border-image-source: url(button.png);
    border-image-width: 10px;
    border-image-slice: 10 fill;
    border-image-repeat: stretch;
}

三．簡寫和版本

//border-image 簡寫格式很簡單，具體如下：

border-image：<' border-image-source '> || <' border-image-slice '> [ /<' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '> 

//以上是手冊上摘錄的，轉換成實際格式如下： 

border-image: url(border.png) 27/27px round; 

對於支持的瀏覽器及版本如下表：

//相容加上首碼

-webkit-border-image: url(border.png) 27/27px round;
-moz-border-image: url(border.png) 27/27px round;
-o-border-image: url(border.png) 27/27px round;
border-image: url(border.png) 27/27px round;