Propriété CSS border-image-slice
Exemple
Spécifiez comment découper l'image de bordure :
#borderimg {
border-image-slice: 30%;
}
Définition et utilisation
La border-image-slice
propriété spécifie comment découper l'image spécifiée par
border-image-source . L'image est toujours découpée en neuf sections : quatre coins, quatre bords et le milieu.
La partie « milieu » est traitée comme entièrement transparente, à moins que le mot-clé fill ne soit défini.
Conseil : examinez également la propriété border-image (une propriété abrégée permettant de définir toutes les propriétés border-image-*).
Valeur par défaut: | 100% |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.borderImageSlice="30%" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Syntaxe CSS
border-image-slice: number|%|fill|initial|inherit;
Remarque : La border-image-slice
propriété peut prendre de une à quatre valeurs. Si la quatrième valeur est omise, elle est identique à la seconde. Si le troisième est également omis, il est identique au premier. Si le second est également omis, il est identique au premier.
Valeurs de propriété
Value | Description | Play it |
---|---|---|
number | The number(s) represent pixels for raster images or coordinates for vector images | |
% | Percentages are relative to the height or width of the image | |
fill | Causes the middle part of the image to be displayed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Pages connexes
Tutoriel CSS : Images de bordure CSS
Référence CSS : propriété border-image
Référence CSS : propriété border-image-outset
Référence CSS : propriété border-image-repeat
Référence CSS : propriété border-image-source
Référence CSS : propriété border-image-width
Référence HTML DOM : propriété borderImageSlice