Comment utiliser la propriété CSS border-image-slice-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2019-05-30 11:26:43

original

2965 Les gens l'ont consulté

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;

Copier après la connexion

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>

Copier après la connexion

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