為邊框應(yīng)用圖片border-image
CSS3的border-image屬性用法詳解:
在CSS3之前，設(shè)置邊框的樣式是非常的單調(diào)的，也就是設(shè)置一下邊框的類型、顏色或者粗細，縱然精雕細刻，總歸提升空間有限，不過border-image屬性的出現(xiàn)可以讓元素的邊框樣式更加豐富多彩，
一.基本概念:
border-image屬性可以用圖片作為邊框樣式。
使用border-style屬性可以設(shè)置邊框的類型，我們可以認為border-image是邊框類型的一種。
當border-image為none或者圖片不可見時，將會顯示border-style定義的邊框效果，否則顯示border-image定義的圖片邊框效果。
此屬性可以認為是以下屬性的簡略寫法:
border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
語法結(jié)構(gòu):
border-image: source slice / width / outset repeat
上面是復合屬性簡略寫法形式，后面會對各個屬性進行詳細說明。
二.參數(shù)解析:
1.border-image-source:
該屬性用于指定是否用圖片定義邊框樣式或圖像來源路徑。
語法結(jié)構(gòu):
border-image-source : none | <url>
此屬性默認值為none，也就是不使用圖片定義邊框。
如果使用圖片定義邊框，那么和background-image類似，也是用url()方式規(guī)定圖片的路徑，可以使相對也可以是絕對路徑。
2.border-image-slice:
此屬性用來規(guī)定圖片的切割位置。
語法結(jié)構(gòu):
border-image-slice: [ <number> | <percentage>]{1,4}&& fill?此屬性默認值是100%。
如果是number方式，則是純數(shù)值，不能夠帶單位，不過專指像素(px)。
如果是percentage方式，則是相對于圖片的尺寸。
number和percentage都可以有1-4個值，取值方式和border-width類似，同時也遵循上右下左方式。
上面介紹了border-image-slice屬性的取值方式，下面介紹一下它是如何具體切割圖片，先看一個圖片:
?
上圖就是我們要用作圖片邊框的圖片，每一個小方塊的尺寸是27px，那么此圖片的長寬尺寸是(27*3)像素。
slice是對圖片進行切割劃分，裁切方式是向內(nèi)進行切割，如果有如下代碼:
border-image-slice:27px 27px 27px 27px
第一個27px是從圖片上邊緣向內(nèi)27px進行切割。
第二個27px是從圖片右邊緣向內(nèi)27px進行切割。
第三個27px是從圖片下邊緣向內(nèi)27px進行切割。
第四個27px是從圖片左邊緣向內(nèi)27px進行切割。
切割演示圖片如下:
?
上面介紹了如何去切割圖片，下面介紹一下如何使用切割后的圖片。
圖片被切割后，會被劃分為九個區(qū)域，這個九個區(qū)域會與元素的九個區(qū)域是一一對應(yīng)的，下面介紹一下元素的九個區(qū)域:
css代碼如下:
div{
margin:0px auto;
height:100px;
width:100px;
border-style:solid;
border-width:20px;
border-color:blue red;
}以上代碼可以形成一個帶有邊框的div元素，其實這個元素也具有潛在的九個區(qū)域，圖示如下:
?
那么邊框圖片的九個區(qū)域和元素的九個區(qū)域一一對應(yīng)起來，也就是邊框圖片的相應(yīng)部位就應(yīng)用于元素的相應(yīng)位置。
fill關(guān)鍵字如果存在的話，將會保留border-image中間的部分（預設(shè)是丟棄中間部分，留空處理）。
3.border-image-width:
此屬性用來規(guī)定邊框圖片寬度。
語法結(jié)構(gòu):
border-image-width : [ <length> | <percentage> | <number> | auto ]{1,4}邊框圖片繪制在指定的區(qū)域內(nèi)的，這個區(qū)域叫做邊框圖片區(qū)域，border-image-width屬性就是用來規(guī)定此區(qū)域的"厚度"。
此屬性可以省略，此時邊框圖片區(qū)域與元素的border是一致的。
此屬性可以有1-4值，取值方式和border-width類似，同時也遵循上右下左方式。
4.border-image-outset:
此屬性用來規(guī)定邊框圖片區(qū)域超出元素邊框的尺寸。
語法結(jié)構(gòu):
border-image-outset : [ <length> | <number> ]{1,4}此屬性可以有1-4值，取值方式和border-width類似，同時也遵循上右下左方式。
5.border-image-repeat:
此屬性用來規(guī)定，切割后的邊框圖片中間部分（演示圖片中的黃色部分）在元素對應(yīng)部分的存在方式。
語法結(jié)構(gòu):
border-image-repeat: [ stretch | repeat | round ]{1,2}首先解釋一下三種方式的含義:
stretch:圖片以延展方式來填充該區(qū)域。
repeat:圖片以重復平鋪方式來填充該區(qū)域。
round:圖片以重復平鋪方式來填充該區(qū)域。如果沒有以整數(shù)的倍數(shù)來填充該區(qū)域，圖片會進行縮放以便于整數(shù)性倍數(shù)的平鋪填充。
此屬性可以有1-2個屬性值:
如果有一個，則用于上下左右四個方位。
如果有兩個，第一個用于上下方位，第二個用于左右方位。
如果省略此屬性，則默認使用stretch。
三.代碼實例:
特別說明:以下代碼實例都是以下面圖片作為邊框圖片，尺寸是（27*3）px。
?
實例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>PHP中文網(wǎng)</title>
<style type="text/css">
div{
height:100px;
width:200px;
border:27px solid red;
border-image:url("mytest/demo/bimg.jpg") 27;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>? ??
以上代碼中，border-image-slice設(shè)置為27，由于沒有規(guī)定border-image-width，那么將以邊框的尺寸為標準，又由于沒有規(guī)定border-image-repeat屬性，則默認采用stretch方式，也就是拉伸被切割的中間區(qū)域(也即是演示圖中的黃色區(qū)域)。
實例二: ??
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>PHP中文網(wǎng)</title>
<style type="text/css">
div{
height:100px;
width:200px;
border:54px solid red;
border-image:url("mytest/demo/bimg.jpg") 27;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>
此實例和實例一的唯一不同之處在于邊框的寬度，邊框圖片會自適應(yīng)邊框的寬度尺寸。
實例三:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://http://ask.php.cn/"/>
<title>PHP中文網(wǎng)</title>
<style type="text/css">
div{
height:100px;
width:200px;
border:27px solid red;
border-image:url("mytest/demo/bimg.jpg") 27 stretch repeat;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>
在以上代碼中，水平方位用stretch拉伸方式，垂直方位用repeat重復平鋪方式，repeat方式不會調(diào)整切割后邊框圖片中間部分(演示圖黃色部分)尺寸方式實現(xiàn)重復平鋪效果，所以會出現(xiàn)殘缺現(xiàn)象。
實例四:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://http://ask.php.cn/" />
<title>PHP中文網(wǎng)</title>
<style type="text/css">
div{
height:100px;
width:100px;
border:27px solid red;
border-image:url("mytest/demo/bimg.jpg") 27 repeat round;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>
round方式可以自動調(diào)整切割后邊框圖片中間部分(演示圖黃色部分)尺寸方式實現(xiàn)重復平鋪效果，所以不會出現(xiàn)殘缺現(xiàn)象。
實例五: ??
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://http://ask.php.cn/" />
<title>PHP中文網(wǎng)</title>
<style type="text/css">
div{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:27px 54px;
border-image:url("mytest/demo/bimg.jpg") 27;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>
以上代碼修改了邊框的尺寸，可以看出邊框圖片會跟著邊框尺寸進行自適應(yīng)。
實例六:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://http://ask.php.cn/" />
<title>PHP中文網(wǎng)</title>
<style type="text/css">
div{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:27px 54px;
border-image:url("bimg.jpg") 27/27px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>
當規(guī)定了border-image-width屬性之后，邊框圖片就不會再適應(yīng)邊框?qū)挾攘恕?/p>
