CSS3的border-image和border-image產生器

CSS3可以設定border的邊框圖片，稍微設定一下就可以使用了，也是很方便，一樣要注意瀏覽器是否支援的問題。

首先準備一張要當邊框的圖片。


然後作以下設定：

view plaincopy to clipboardprint?

1. div   
2. {   
3. border-image:url(border.png) 30 30 round;   
4. -moz-border-image:url(border.png) 30 30 round; /* Firefox */  
5. -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */  
6. -o-border-image:url(border.png) 30 30 round; /* Opera */  
7. }   

數字代表邊框粗細，可以照上、右、下、左的方向設定粗細，然後可以在作以下的設定圖片重複的方式。
repeat: 圖片重複排列。
round: 圖片重複，並把圖片頭尾相接。
stretch: 圖片延展。

然後網路上有一個border-image-generator，可以測試看看，也可以幫助更輕鬆寫CSS的border-image。