border

English [ˈbɔ:də(r)] US [ˈbɔ:rdə(r)]

n. bordure; bordure d'emballage

vt.& vi. le côté de...

vt. Le long du côté de..., autour de..., bordant...

vi Approximativement, adjacent à

Troisième personne du singulier : frontières Pluriel : frontières Participe présent : bordant Passé. temps : bordé Participe passé : bordé

image

英[ˈɪmɪdʒ] 美[ˈɪmɪdʒ]

n Image; portrait, intention miroir, image

vt. ; symbole

Troisième personne du singulier : images Pluriel : images participe présent : imagerie passé : imagé participe passé : imagé

repeat

英[rɪˈpi:t] 美[rɪˈpit]

vt.repeat;

vi.redo; répéter le vote

n.Répétition; (programme) reconstitution; choses répétées

Troisième personne du singulier: répète Pluriel: répète Participe présent: répéter Passé: répété Participe passé: répété

propriété css border-image-repeat syntaxe

Fonction : Spécifie si la bordure de l'image doit être répétée, étirée ou arrondie.

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

Description : stretch étend l'image pour remplir la zone, répéter les tuiles (répéter) l'image pour remplir la zone. le tour est similaire à la valeur de répétition. Si toutes les images ne peuvent pas être entièrement carrelées, elles sont mises à l'échelle pour s'adapter à la zone.

Remarque : Cette propriété spécifie comment étirer et disposer les bords et le milieu de l'image de bordure. Par conséquent, vous pouvez spécifier deux valeurs. Si la deuxième valeur est omise, la même valeur que la première est prise.

propriété css border-image-repeat exemple

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

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne