border

UK[?b?:d?(r)] US[?b?:rd?(r)]

n.Border; edge; edging; wrapping Edge

vt.& vi. Bound with, on the edge of...

vt. Along the edge of, surround..., edge...

vi. Approximate, adjacent

Third person singular: borders Plural: borders Present participle: bordering Past tense: bordered Past participle: bordered

image

英[ ??m?d?] 美[??m?d?]

##n.Image; portrait; concept, intention; mirror image, image

vt.Reflection; imagination; image of; symbol

Third person singular: images Plural: images Present participle: imaging Past tense: imaged Past participle: imaged

repeat

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

vt. Repeat; retell, recite

vi. Redo; repeat vote

n. Repeat; (program) reenactment; repeated things

Third person Singular: repeats Plural: repeats Present participle: repeating Past tense: repeated Past participle: repeated

css border-image-repeat attribute syntax

Function: Specifies whether the image border should be repeated, stretched, or rounded.

Syntax: border-image-repeat: stretch|repeat|round;

Description: stretch stretches the image to fill the area repeat tiles (repeats) the image to fill the area. round is similar to the repeat value. If all images cannot be completely tiled, the images are scaled to fit the area.

Notes: This property specifies how to extend and lay out the edges and middle of the border image. Therefore, you can specify two values. If the second value is omitted, the same value as the first is taken.

css border-image-repeat attribute example

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

Run instance ?

Click the "Run instance" button to view the online instance