在CSS入門教程中，我們學習了邊框樣式border-style，其中邊框只有實線、虛線、點狀線等幾種簡陋的形式。那假如我們想要為邊框添加漂亮的背景圖片，那該怎麼做呢？
在CSS3中，我們可以使用border-image屬性為邊框添加背景圖片。
語法：
說明：
從上面語法分析圖，我們可以看出，使用border-image屬性設置邊框背景圖片需要設置3種參數：
假如我們要把下面這張圖作為（90px×90px）元素邊框的背景圖片，應該怎麼做呢？（下面每個小方塊30px×30px）
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-image屬性</title>
<style type="text/css">
#div1
{
width:210px;
height:150px;
border:30px solid gray;
border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
-webkit-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
-moz-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
從上面預覽效果我們可以知道，位於4個角的數字1、3、7、9還是乖乖地位於4個角，然後邊框會不斷平鋪。但是，中部的數字5會平鋪填充。
當我們使用下圖作為背景圖片時，大家再次看看效果是怎樣的呢？
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-image屬性</title>
<style type="text/css">
#div1
{
width:210px;
height:150px;
border:30px solid gray;
border-image:url("../App_images/lesson/run_css3/border_img2.png") 30 repeat;
-webkit-border-image:url("../App_images/lesson/run_css3/border_img2.png") 30 repeat;
-moz-border-image:url("../App_images/lesson/run_css3/border_img2.png") 30 repeat;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
大家仔細研究這兩個例子，自己感性去理解一下。
從上面兩個例子，使用border-image屬性為邊框添加背景時候，如果想要達到預期效果，我們需要注意以下2點：
（1）邊框的背景在制作時候，應該制作4條邊，中間部分需要挖空；
（2）邊框背景圖片的每條邊寬度跟對應的邊框寬度（border-wdith）應該相同；
從上面border-image屬性語法中可以看出，邊框背景圖片延伸方式共有3種。在這裡，我們同樣使用下面這種圖片作為邊框背景圖片：
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-image屬性</title>
<style type="text/css">
#div1
{
width:170px;
height:110px;
border:30px solid gray;
border-image:url("../App_images/lesson/run_css3/border_img2.png") 30 repeat;
-webkit-border-image:url("../App_images/lesson/run_css3/border_img2.png") 30 repeat;
-moz-border-image:url("../App_images/lesson/run_css3/border_img2.png") 30 repeat;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
上述代碼使用的邊框背景圖片延伸方式為repeat。4條邊的小方塊會不斷重復，超出元素寬度或高度的部分將會被剪切掉。
round可以理解為圓滿地鋪滿，為了實現圓滿，邊框圖片會壓縮或拉伸。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-image屬性</title>
<style type="text/css">
#div1
{
width:170px;
height:110px;
border:30px solid gray;
border-image:url("../App_images/lesson/run_css3/border_img2.png") 30 round;
-webkit-border-image:url("../App_images/lesson/run_css3/border_img2.png") 30 round;
-moz-border-image:url("../App_images/lesson/run_css3/border_img2.png") 30 round;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這個例子跟repeat中的例子一樣，只是我們把repeat改為了round。其中，repeat會把超出寬度和高度的部分剪切掉，而round卻是拉伸或壓縮邊框部分以實現“圓滿”地平鋪。
stretch，指的是對邊框部分進行拉伸（不重復），有多長拉多長。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-image屬性</title>
<style type="text/css">
#div1
{
width:170px;
height:110px;
border:30px solid gray;
border-image:url("../App_images/lesson/run_css3/border_img2.png") 30 stretch;
-webkit-border-image:url("../App_images/lesson/run_css3/border_img2.png") 30 stretch;
-moz-border-image:url("../App_images/lesson/run_css3/border_img2.png") 30 stretch;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
在浏覽器預覽效果如下：
為了能夠更加方便靈活定義邊框圖像，CSS3允許從border-image屬性派生出眾多的子屬性。