圖檔邊框border-image的用法

對于CSS屬性

border

，相信所有的WEB開發人員都非常熟悉。我們可通過設定HTML元素的

border

的寬度、顔色、樣式，來讓HTML元素表現出不同的邊框，比如雙線、虛線、圓點線。但不管你怎麼設定，這些都是一些非常原始的做法。從CSS3起，我們有了一個新的屬性：

border-image

，它能讓你用漂亮的小圖檔來圍繞HTML元素，以圖檔邊框的形式出現。通過

border-image

屬性，我們可以制作出非常漂亮的邊框樣式。

在CSS3裡引入的很多新特征中，比如HTML5中新型input類型,中文字型(web font),placeholder等，都很實用，也很流行，而且我們之前也舉了一個非常漂亮的

border-image

的例子，但網絡上使用圖檔邊框

border-image

的還是很少，我想主要是因為谷歌浏覽器和火狐浏覽器很早就支援它們了，而IE11才支援這種文法。

圖檔邊框

border-image

的文法

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

這些文法描述看起來非常的枯燥，每個人都喜歡看執行個體，這樣最容易了解，下面我們就來将幾個執行個體。

圖檔邊框

border-image

用法一：邊框圖循環平鋪(repeat)

這種情況下，邊框圖圖檔将會依次平鋪，填滿邊框區域。

#repeat { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}
           

執行個體示範1：

圖檔邊框

border-image

用法二：邊框圖自适應循環平鋪(round)

大家也許看到了，上面的圖檔邊框雖然很漂亮，但有個瑕疵，就是當元素寬度或高度不是邊框圖的整數倍時，最後一個/第一個圖檔不能完成顯示，會被遮擋一部分，這樣看起來很不美觀。CSS3的設計者們已經考慮到了這個問題，使用

round

屬性值，就能避免這種情況。

round

的作用是邊框圖進行稍微的調整，來保證每個圖檔都能完成顯示，增加了觀賞性。

#round { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}
           

執行個體示範2

圖檔邊框

border-image

用法三：邊框圖拉伸平鋪(stretch)

‘stretch’就是拉伸，将小圖檔拉長來填滿邊框區域，并不循環，很顯然，這樣邊框圖會變形。

#stretch { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}
           

執行個體示範3

src="http://www.webhek.com/demos/border-image3.html" width="100%" height="150" frame style="border-width: 0px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; max-width: 100%; display: block;">

很顯然，

border-image

第一種用法應該是不常用的，因為有時候它會導緻邊框有殘缺的感覺。而第二種和第三種用法各有千秋，是各自不同的美。這裡使用的邊框圖其實很簡單。精巧的美工能做出更漂亮的邊框圖，能呈現出讓人贊歎的效果，就比如之前的文章裡的一個例子，下面再次拿出來給大家看看。

src="http://www.webhek.com/demos/border-image4.html" width="100%" height="150" frame style="border-width: 0px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; max-width: 100%; display: block;">