diff options
Diffstat (limited to 'files/fr/web/css/border-image-width/index.md')
| -rw-r--r-- | files/fr/web/css/border-image-width/index.md | 82 |
1 files changed, 45 insertions, 37 deletions
diff --git a/files/fr/web/css/border-image-width/index.md b/files/fr/web/css/border-image-width/index.md index 3854f22b95..8a0a4689bf 100644 --- a/files/fr/web/css/border-image-width/index.md +++ b/files/fr/web/css/border-image-width/index.md @@ -1,19 +1,16 @@ --- title: border-image-width slug: Web/CSS/border-image-width -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/border-image-width +browser-compat: css.properties.border-image-width --- {{CSSRef}} -La propriété **`border-image-width`** définit la largeur de la bordure imagée. +La propriété [CSS](/fr/docs/Web/CSS) **`border-image-width`** définit la largeur de [l'image de bordure](/fr/docs/Web/CSS/border-image) d'un élément. {{EmbedInteractiveExample("pages/css/border-image-width.html")}} -Si `border-image-width` est supérieur à {{cssxref("border-width")}}, la bordure imagée s'étendra au-delà du _padding_ voire du contenu. +Si la valeur de cette propriété est supérieure à [`border-width`](/fr/docs/Web/CSS/border-width), la bordure imagée s'étendra au-delà du remplissage (<i lang="en">padding</i>) voire du contenu. ## Syntaxe @@ -33,7 +30,7 @@ border-image-width: 25%; /* Type <number> */ border-image-width: 3; -/* épaisseur verticale | horizontale */ +/* côtés verticaux | horizontaux */ border-image-width: 2em 3em; /* haut | côtés horizontaux | bas */ @@ -45,66 +42,77 @@ border-image-width: 5% 2em 10% auto; /* Valeurs globales */ border-image-width: inherit; border-image-width: initial; +border-image-width: revert; border-image-width: unset; ``` La propriété `border-image-width` est définie avec une, deux, trois ou quatre valeurs parmi celles de la liste qui suit. -- Lorsqu'une valeur est utilisée, c'est cette valeur qui est utilisée pour les quatre côtés -- Lorsque deux valeurs sont utilisées, la premières s'applique aux côtés haut et bas et la seconde aux côté gauche et droit -- Lorsque trois valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas. -- Lorsque quatre valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté haut, droit, bas et gauche (dans le sens horaire). +- Lorsqu'**une** valeur est utilisée, c'est cette valeur qui est utilisée pour **les quatre côtés** +- Lorsque **deux** valeurs sont utilisées, la première s'applique aux côtés haut et bas et la seconde aux côtés **gauche et droit** +- Lorsque **trois** valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés **gauche et droit** et la troisième au côté bas. +- Lorsque **quatre** valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté **haut**, **droit**, **bas** et **gauche** (dans le sens horaire). ### Valeurs - `<length-percentage>` - - : Une longueur ou un pourcentage représentant la largeur de la bordure. Cette longueur peut être absolue (ex. `px`) ou relative (ex. `rem`). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides`.` + - : Une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) représentant la largeur de la bordure. Cette longueur peut être absolue (ex. `px`) ou relative (ex. `rem`). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides. - `<number>` - - : Représente un multiple de [la valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de la propriété {{cssxref("border-width")}} de l'élément. Les valeurs négatives sont considérées invalides. + - : Représente un multiple de [la valeur calculée](/fr/docs/Web/CSS/computed_value) de la propriété [`border-width`](/fr/docs/Web/CSS/border-width) de l'élément. Les valeurs négatives sont considérées invalides. - `auto` - - : L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété {{cssxref("border-image-slice")}} correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de `border-width` qui sera utilisée à la place. -- `inherit` - - : Un mot-clé qui indique que les quatre valeurs sont héritées des valeurs calculées pour la propriété de l'élément parent. + - : L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété [`border-image-slice`](/fr/docs/Web/CSS/border-image-slice) correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de `border-width` qui sera utilisée à la place. -### Syntaxe formelle +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Réaliser un pavage avec une image de bordure + +Dans cet exemple on crée une image de bordure en utilisant le fichier ".png" suivant, qui mesure 90 pixels par 90 pixels : + + + +Chaque cercle sur l'image a un diamètre de 30 pixels. + +#### HTML + +```html +<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. + At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, + no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> +``` + +#### CSS ```css p { border: 20px solid; - border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round; + border-image: url("border.png") 30 round; border-image-width: 16px; padding: 40px; } ``` -### HTML - -```html -<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, - no sea takimata sanctus est Lorem ipsum dolor sit amet. -</p> -``` +#### Résultat -### Résultat - -{{EmbedLiveSample('Exemples', '480', '320')}} +{{EmbedLiveSample('', 200, 280)}} ## Spécifications -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-image-width")}} +{{Compat}} + +## Voir aussi + +- [Arrière-plans et bordures](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [Apprendre le CSS : arrière-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) |