border

英[?b?:d?(r)]? ?美[?b?:rd?(r)]??

#n.邊界;邊;鑲邊;包;邊

vt.& vi.與…接界，在…的邊上

vt.沿…的邊，環(huán)繞…，給…鑲邊

##vi.近似，毗鄰

第三人稱單數(shù)： borders 複數(shù)： borders 現(xiàn)在分詞： bordering 過(guò)去式： bordered 過(guò)去分詞： bordered

#image

#[ ??m?d?]? ?美[??m?d?]??

n.影像;肖像;概念，意向;鏡像，映像

#vt.反映;想像;作…的像;象徵

##第

#三人稱為單數(shù)： images 複數(shù)： images 現(xiàn)在分詞： imaging 過(guò)去式： imaged 過(guò)去分詞： imaged

repeat

英[r??pi:t]? ?美[r?p

#英[r??pi:t]? ?美[r?pit]?

##vt.重複;複述，背誦

vi.重做;重複投票

n.重複;（節(jié)目）重演;重複的事物

第三人稱單數(shù)： repeats 複數(shù)： repeats 現(xiàn)在分詞： repeating 過(guò)去式： repeated 過(guò)去分詞： repeated

CSS border-image-repeat 屬性 語(yǔ)法

作用：規(guī)定圖像邊框是否應(yīng)該重複（repeated）、拉伸（stretched）或鋪滿（rounded）。

語(yǔ)法：border-image-repeat: stretch|repeat|round;

說(shuō)明：stretch拉伸圖像來(lái)填滿區(qū)域repeat平鋪（重複）影像來(lái)填充區(qū)域。 round類似 repeat 值。如果無(wú)法完整平鋪所有影像，則對(duì)影像進(jìn)行縮放以適應(yīng)區(qū)域。

註解：此屬性規(guī)定如何延展和鋪排邊框影像的邊緣和中間部分。因此，您可以規(guī)定兩個(gè)值。如果省略第二個(gè)值，則採(cǎi)取與第一個(gè)值相同的值。

CSS border-image-repeat 屬性 範(fàn)例

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    background-color: lightgrey;
    border: 30px solid transparent;
    border-image: url('http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
    border-image-slice: 30;
    border-image-repeat: repeat;
}
</style>
</head>
<body>

<div>
 DIV 使用圖像邊框。
</div>
<p>使用的圖片:</p>
<img src="http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg">

<p><b>注意: </b>Internet Explorer 10, Opera 12, 和 Safari 5 不支持 border-image-repeat 屬性。</p>

</body>
</html>

執(zhí)行實(shí)例 ?

點(diǎn)擊 "執(zhí)行實(shí)例" 按鈕查看線上實(shí)例