Maison > Article > interface Web > Comment utiliser l'attribut border-image-slice
Comment utiliser l'attribut border-image-slice
- 青灯夜游original
- 2019-02-12 14:48:094269parcourir
L'attribut border-image-slice est utilisé pour spécifier le décalage vers l'intérieur de la bordure de l'image (haut, droite, bas, gauche) ; il n'y a pas de valeur unitaire spécifique, il vous suffit de donner une simple valeur numérique ou de la définir. en pourcentage.
Propriété CSS3 border-image-slice
Fonction : Spécifie le image Le décalage vers l'intérieur des bords supérieur, droit, inférieur et gauche ; la bordure de l'image sera découpée en 9 zones : 4 coins, 4 zones latérales et une partie médiane, soit une grille de 9 carrés.
Syntaxe :
border-image-slice: number|%|fill;
numéro : Valeur numérique, représentant le pixel (s'il s'agit d'une image raster) ou la coordonnée vectorielle (s'il s'agit d'une image vectorielle) dans l'image.
% : Valeur en pourcentage par rapport à la taille de l'image : la largeur de l'image affecte le décalage horizontal, et la hauteur affecte le décalage vertical.
fill : Conserver la partie centrale de l'image de bordure.
Remarque : À moins que le mot-clé fill ne soit utilisé, la partie centrale de l'image sera ignorée. Si la quatrième valeur/pourcentage est omis, elle est identique à la deuxième valeur. 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.
Exemple d'utilisation de la propriété CSS3 border-image-slice :
Spécifiez le décalage vers l'intérieur de la bordure de l'image :
<!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-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 l'attribut border-image-slice" >
</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!