Comment utiliser l'attribut border-image-repeat-tutoriel CSS-php.cn

Comment utiliser l'attribut border-image-repeat

青灯夜游

Libérer： 2019-02-12 14:23:29

original

4021 Les gens l'ont consulté

L'attribut border-image-repeat est utilisé pour spécifier si la bordure de l'image doit être répétée, étirée ou arrondie.

Comment utiliser l'attribut border-image-repeat

Attribut CSS3 border-image-repeat

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

Syntaxe :

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

Copier après la connexion

étirer : signifie étirer l'image pour remplir la zone

répéter : signifie mosaïquer (répéter) l'image à remplir la région.

rond : similaire à la valeur de répétition ; si l'image ne peut pas être complètement carrelée, l'image est mise à l'échelle pour s'adapter à la zone.

espace : similaire à la valeur de répétition. Si toutes les images ne peuvent pas être complètement carrelées, l'espace d'expansion sera réparti autour de l'image

Description : L'attribut border-image-repeat spécifie comment étendre et disposer les bords et le milieu de l'image de la 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.

Remarque : Internet Explorer 10, Opera 12 et Safari 5 ne prennent pas en charge l'attribut border-image-repeat.

Exemple d'utilisation de l'attribut CSS3 border-image-repeat

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    margin:50px;
    border: 30px solid transparent;
    border-image: url(&#39;https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png&#39;);
    border-image-slice: 25;
    
}
.round{
    border-image-repeat: round;
}
.repeat{
    border-image-repeat: repeat;
}
.stretc{
    border-image-repeat: stretc;
}
</style>
</head>
<body>

<div class="round">
 DIV 使用图像边框--round
</div>
<div class="repeat">
 DIV 使用图像边框--repeat
</div>
<div class="stretc">
 DIV 使用图像边框--stretc
</div>
</body>
</html>

Copier après la connexion

Rendu :

Comment utiliser lattribut border-image-repeat