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