border

English [?b?:rd?(r)]

n. ???; ??? ??..., ?? the side of...

vt.side of..., around..., bordering...

vi. ??, ??

3?? ??: borders ??: borders ?? ??: bordering ?? ??: ??? ??

image

英[??m?d?]

n. ???, ??, ???

vt. ; ??

3?? ??: Images ???: ??? ?? ??: ??? ?? ??: imaged

repeat

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

vt.repeat;

vi.redo; ?? ??

n.Repetition; (????) ???? ?

3?? ??: ?? ??: ?? ?? ??: ?? ?? ??: ??

CSS ??? ??? ?? ?? ???

??: ??? ???? ????, ???, ??? ?? ?????.

??: ??border-image-repeat: Stretch|repeat|round;

??: stretch? ???? ?? ??? ????. ??? ????(??) ???? ??? ????. round? ?? ?? ?????. ?? ???? ??? ???? ? ?? ?? ??? ??? ?? ??? ?? ?????.

??: ? ??? ??? ???? ????? ??? ??? ???? ??? ?????. ??? ? ?? ?? ??? ? ????. ? ?? ?? ???? ? ?? ?? ??? ?? ?????.

CSS ??? ??? ?? ?? ?

<!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>

???? ?? ?

??? ????? ??? "???? ??" ??? ?????