Maison >interface Web >Questions et réponses frontales >Comment utiliser la propriété CSS border-image-slice
La propriété css border-image-slice est utilisée pour spécifier le décalage vers l'intérieur de la bordure de l'image (haut, droite, bas, gauche). L'image sera divisée en neuf zones : quatre coins, quatre côtés et une zone centrale. . À moins que le mot-clé fill ne soit utilisé, la partie centrale de l’image est ignorée.
Comment utiliser l'attribut css border-image-slice ? L'attribut
border-image-slice spécifie le décalage vers l'intérieur de la bordure de l'image.
Syntaxe :
border-image-slice: number|%|fill;
Valeur d'attribut :
Quantity : Valeur numérique, représentant les pixels de l'image (si il s'agit d'une image raster) ou de coordonnées vectorielles (dans le cas d'une image vectorielle).
Quantity % : 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.
● Remplir : conserver la partie centrale de l'image de bordure.
Remarque :
Cet attribut spécifie le décalage vers l'intérieur des bords supérieur, droit, inférieur et gauche de l'image. L'image est divisée en neuf régions : quatre. coins, quatre côtés et une zone médiane. À moins que le mot-clé fill ne soit utilisé, la partie centrale de l’image est 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 de propriété CSS border-image-slice
<!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"> </body> </html>
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!