Comment utiliser l'attribut border-image-slice-tutoriel CSS-php.cn

Comment utiliser l'attribut border-image-slice

青灯夜游

Libérer： 2019-02-12 14:48:09

original

4257 Les gens l'ont consulté

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.

Comment utiliser l'attribut border-image-slice

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;

Copier après la connexion

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(&#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" alt="Comment utiliser l'attribut border-image-slice" >
</body>
</html>

Copier après la connexion

Rendu :

Comment utiliser lattribut border-image-slice