為邊框套用圖片border-image
CSS3的border-image屬性用法詳解:
#在CSS3之前，設(shè)定邊框的樣式是非常的單調(diào)的，也就是設(shè)定邊框的類型、顏色或粗細(xì)，縱然精雕細(xì)刻，總歸提升空間有限，不過(guò)border-image屬性的出現(xiàn)可以讓元素的邊框樣式更加豐富多彩，
一.基本概念:
border- image屬性可以用圖片作為邊框樣式。
使用border-style屬性可以設(shè)定邊框的類型，我們可以認(rèn)為border-image是邊框類型的一種。
當(dāng)border-image為none或圖片不可見(jiàn)時(shí)，將會(huì)顯示border-style定義的邊框效果，否則顯示border-image定義的圖片邊框效果。
此屬性可以認(rèn)為是以下屬性的簡(jiǎn)略寫(xiě)法:
border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
語(yǔ)法結(jié)構(gòu):
border-image: source slice / width / outset repeat
上面是複合屬性簡(jiǎn)略寫(xiě)法形式，後面會(huì)對(duì)各個(gè)屬性進(jìn)行詳細(xì)說(shuō)明。
二.參數(shù)解析:
1.border-image-source:
此屬性用於指定是否以圖片定義邊框樣式或圖像來(lái)源路徑。
語(yǔ)法結(jié)構(gòu):
border-image-source : none | <url>
此屬性預(yù)設(shè)值為none，也就是不使用圖片定義邊框。
如果使用圖片定義邊框，那麼和background-image類似，也是用url()方式規(guī)定圖片的路徑，可以讓相對(duì)也可以是絕對(duì)路徑。
2.border-image-slice:
此屬性用來(lái)規(guī)定圖片的切割位置。
語(yǔ)法結(jié)構(gòu):
border-image-slice: [ <number> | <percentage>]{1,4}&& fill?此屬性預(yù)設(shè)值是100%。
如果是number方式，則是純數(shù)值，不能夠帶單位，不過(guò)專指像素(px)。
如果是percentage方式，則是相對(duì)於圖片的尺寸。
number和percentage都可以有1-4個(gè)值，取值方式和border-width類似，同時(shí)也遵循上右下左方式。
上面介紹了border-image-slice屬性的取值方式，下面介紹一下它是如何具體切割圖片，先看一個(gè)圖片:
?
上圖就是我們要用作圖片邊框的圖片，每一個(gè)小方塊的尺寸是27px，那麼此圖片的長(zhǎng)寬尺寸是(27*3)像素。
slice是對(duì)圖片進(jìn)行切割劃分，裁切方式是向內(nèi)進(jìn)行切割，如果有如下程式碼:
border-image-slice:27px 27px 27px 27px
第一個(gè)27px是從圖片上邊緣向內(nèi)27px進(jìn)行切割。
第二個(gè)27px是從圖片右邊緣向內(nèi)27px切割。
第三個(gè)27px是從圖片下緣向內(nèi)27px進(jìn)行切割。
第四個(gè)27px是從圖片左邊緣向內(nèi)27px進(jìn)行切割。
切割示範(fàn)圖片如下:
?
上面介紹如何去切割圖片，以下介紹如何使用切割後的圖片。
圖片被切割後，會(huì)被劃分為九個(gè)區(qū)域，這個(gè)九個(gè)區(qū)域會(huì)與元素的九個(gè)區(qū)域是一一對(duì)應(yīng)的，下面介紹一下元素的九個(gè)區(qū)域:
css代碼如下:
div{
margin:0px auto;
height:100px;
width:100px;
border-style:solid;
border-width:20px;
border-color:blue red;
}以上程式碼可以形成一個(gè)有邊框的div元素，其實(shí)這個(gè)元素也具有潛在的九個(gè)區(qū)域，圖示如下:
?
那麼邊框圖片的九個(gè)區(qū)域和元素的九個(gè)區(qū)域一一對(duì)應(yīng)起來(lái)，也就是邊框圖片的相應(yīng)部位就應(yīng)用於元素的相應(yīng)位置。
fill關(guān)鍵字如果存在的話，將會(huì)保留border-image中間的部分（預(yù)設(shè)是丟棄中間部分，留空處理）。
3.border-image-width:
此屬性用來(lái)規(guī)定邊框圖片寬度。
語(yǔ)法結(jié)構(gòu):
border-image-width : [ <length> | <percentage> | <number> | auto ]{1,4}邊框圖片繪製在指定的區(qū)域內(nèi)的，這個(gè)區(qū)域叫做邊框圖片區(qū)域，border-image-width屬性就是用來(lái)規(guī)定此區(qū)域的"厚度"。
此屬性可以省略，此時(shí)邊框圖片區(qū)域與元素的border是一致的。
此屬性可以有1-4值，取值方式和border-width類似，同時(shí)也遵循上右下左方式。
4.border-image-outset:
此屬性用來(lái)規(guī)定邊框圖片區(qū)域超出元素邊框的尺寸。
語(yǔ)法結(jié)構(gòu):
border-image-outset : [ <length> | <number> ]{1,4}此屬性可以有1-4值，取值方式和border-width類似，同時(shí)也遵循上右下左方式。
5.border-image-repeat:
此屬性用來(lái)規(guī)定，切割後的邊框圖片中間部分（示範(fàn)圖片中的黃色部分）在元素對(duì)應(yīng)部分的存在方式。
語(yǔ)法結(jié)構(gòu):
border-image-repeat: [ stretch | repeat | round ]{1,2}先解釋三種方式的意義:
stretch:圖片以延展方式來(lái)填入該區(qū)域。
repeat:圖片以重複平鋪方式來(lái)填滿該區(qū)域。
round:圖片以重複平鋪方式來(lái)填滿該區(qū)域。如果沒(méi)有以整數(shù)的倍數(shù)來(lái)填滿該區(qū)域，圖片會(huì)進(jìn)行縮放以便於整數(shù)性倍數(shù)的平鋪填充。
此屬性可以有1-2個(gè)屬性值:
如果有一個(gè)，則用於上下左右四個(gè)方位。
如果有兩個(gè)，第一個(gè)用於上下方位，第二個(gè)用於左右方位。
如果省略此屬性，則預(yù)設(shè)使用stretch。
三.程式碼實(shí)例:
特別說(shuō)明:以下程式碼實(shí)例都是以下面圖片作為邊框圖片，尺寸是（27*3）px。
?
實(shí)例一:
<!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>? ??
實(shí)例二: ??#
<!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>
此實(shí)例和實(shí)例一的唯一不同之處在於邊框的寬度，邊框圖片會(huì)自適應(yīng)邊框的寬度尺寸。
實(shí)例三:
<!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方式不會(huì)調(diào)整切割後邊框圖片中間部分(示範(fàn)圖黃色部分)尺寸方式實(shí)現(xiàn)重複平鋪效果，所以會(huì)出現(xiàn)殘缺現(xiàn)象。
實(shí)例四:
<!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方式可以自動(dòng)調(diào)整切割後邊框圖片中間部分(示範(fàn)圖黃色部分)尺寸方式實(shí)作重複平鋪效果，所以不會(huì)有殘缺現(xiàn)象。
實(shí)例五: ??
<!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>
#以上程式碼修改了邊框的尺寸，可以看到邊框圖片會(huì)跟著邊框尺寸進(jìn)行自適應(yīng)。
實(shí)例六:
<!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>
當(dāng)規(guī)定了border-image-width屬性之後，邊框圖片就不會(huì)再適應(yīng)邊框?qū)挾攘恕?
