Propriété CSS border-image-slice
La propriété border-image-slice spécifie comment découper l'image définie par border-image-source en neuf régions : quatre coins, quatre bords et une partie centrale. La partie "centrale" est entièrement transparente, jusqu'à ce que la valeur "fill" soit définie. Il s'agit de l'une des propriétés CSS3.
La propriété border-image-slice possède trois valeurs : number, percentage et fill. Le nombre représente un décalage de bord en pixels pour les images matricielles et des coordonnées pour les images vectorielles. Le pourcentage représente un décalage de bord en pourcentage de la taille de l'image source. fill fait en sorte que la partie centrale de l'image soit affichée comme une image d'arrière-plan.
Cette propriété peut accepter jusqu'à quatre valeurs. Les valeurs négatives ne sont pas autorisées. Si une seule valeur est appliquée, elle définit les quatre tranches à la même distance de leurs côtés respectifs. Si deux valeurs sont spécifiées, la première crée des tranches mesurées depuis le haut et le bas. La seconde crée des tranches mesurées depuis la gauche et la droite. Si trois valeurs sont appliquées, la première crée des tranches depuis le haut, la seconde depuis la gauche et la droite, la troisième depuis le bas. Et si quatre valeurs sont spécifiées, elles créent des tranches depuis les quatre côtés.
| Valeur initiale | 100 %. |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.borderImageSlice = "10%"; |
Syntaxe
Syntaxe de la propriété CSS border-image-slice
border-image-slice: number | % | fill | initial | inherit;Exemple de la propriété border-image-slice :
Exemple de la propriété CSS border-image-slice avec une valeur %(pourcentage)
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("https://fr.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
border-image-slice: 20%;
}
</style>
</head>
<body>
<h2>Border-image-slice example</h2>
<p class="border">Here the border-image-slice is set to 20%.</p>
<p>Here is the original image used:</p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Résultat
Un autre exemple où deux valeurs sont utilisées. La première valeur crée des tranches mesurées depuis le haut et le bas. La seconde crée des tranches mesurées depuis la gauche et la droite.
Exemple de la propriété border-image-slice avec deux valeurs :
Exemple de la propriété CSS border-image-slice avec deux valeurs
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("https://fr.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
border-image-slice: 30 50;
}
</style>
</head>
<body>
<h2>Border-image-slice example</h2>
<p class="border">Here the border-image-slice is set to 30 and 50.</p>
<p>Here is the original image used:</p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Exemple de la propriété border-image-slice avec les valeurs "%" et "fill" :
Exemple de la propriété CSS border-image-slice avec les valeurs pourcentage et fill
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("https://fr.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
border-image-slice: 15% fill;
}
</style>
</head>
<body>
<h2>Border-image-slice example</h2>
<p class="border"><strong>Here the border-image-slice is set to 15 fill.</strong></p>
<p>Here is the original image used:</p>
<img src="https://fr.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| number | Représente un décalage de bord en pixels pour les images matricielles et des coordonnées pour les images vectorielles. | Essayer » |
| % | Représente un décalage de bord en pourcentage de la taille de l'image source. | Essayer » |
| fill | Fait en sorte que la partie centrale de l'image soit affichée comme une image d'arrière-plan. | Essayer » |
| initial | Définit la propriété à sa valeur par défaut. | |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété border-image-slice en CSS ?