Maison > Article > interface Web > Comment utiliser la propriété CSS border-image-width
Comment utiliser la propriété CSS border-image-width
- 青灯夜游original
- 2019-05-30 16:43:493209parcourir
La propriété CSS border-image-width est utilisée pour spécifier la largeur de la bordure de l'image. Vous pouvez définir 4 valeurs(non négatives) pour diviser l'image de la bordure en neuf parties. Ils représentent les distances vers l’intérieur depuis le haut, la droite, le bas et la gauche de la zone.
Comment utiliser la propriété CSS border-image-width ?
L'attribut border-image-width spécifie la largeur de la bordure de l'image.
Syntaxe :
border-image-width: number|%|auto;
Valeur de l'attribut :
numéro : Représente le multiple de la largeur de bordure correspondante
% : La taille de la zone de l'image englobante : la zone de la largeur décalée horizontalement, la zone de la hauteur décalée verticalement
auto : Si spécifiée, la largeur est la largeur intrinsèque ou hauteur de la tranche d’image correspondante.
Remarque :
Les 4 valeurs de l'attribut border-image-width sont spécifiées pour diviser l'image de bordure en neuf parties. Ils représentent les distances vers l’intérieur depuis le haut, la droite, le bas et la gauche de la zone.
Identique à la deuxième valeur si la quatrième valeur est omise. Si la troisième valeur est omise, elle est identique à la première valeur. Si la deuxième valeur est omise, elle est identique à la première valeur. Aucune valeur négative n'est autorisée en tant que valeur de largeur d'image de bordure.
Exemple de propriété CSS border-image-width
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
border: 30px solid transparent;
border-image: url('https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png');
border-image-width: auto;
border-image-repeat: round;
border-image-slice: 30;
}
</style>
</head>
<body>
<div>DIV 使用图像边框</div>
<p>使用的图片:</p>
<img src="https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png" alt="Comment utiliser la propriété CSS border-image-width" >
</body>
</html>Rendu :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!