Maison >interface Web >Questions et réponses frontales >Comment utiliser la propriété CSS border-image-slice

Comment utiliser la propriété CSS border-image-slice

青灯夜游
青灯夜游original
2019-05-30 11:26:432964parcourir

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 la propriété CSS border-image-slice

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(&#39;https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png&#39;);
    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>

Comment utiliser la propriété CSS border-image-slice

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn