diff --git a/files/fr/web/css/shorthand_properties/index.md b/files/fr/web/css/shorthand_properties/index.md index 848d0d75a0cdef..ba6ebddf87f116 100644 --- a/files/fr/web/css/shorthand_properties/index.md +++ b/files/fr/web/css/shorthand_properties/index.md @@ -28,86 +28,23 @@ Bien que les propriétés raccourcies soient pratiques à utiliser. Il est néce 1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : - - - - - - - - - - - - - - - - - - - -
border1.png - 1 valeur : border-width: 1em — La valeur unique - s'adresse à tous les côtés. -
border2.png - 2 valeurs : border-width: 1em 2em — La première - valeur représente les côtés horizontaux en haut et en bas. La seconde - valeur représente les côtés verticaux, à gauche et à droite. -
border3.png - 3 valeurs : border-width: 1em 2em 3em — La - première valeur représente le côté haut, la deuxième les côtés gauche et - droit et la troisième représente le côté bas. -
border4.png -

- 4 valeurs : border-width: 1em 2em 3em 4em — Les - quatre valeurs représentent respectivement le côté haut, le côté - droit, le côté bas et le côté haut, toujours dans cet ordre (le sens - horaire). -

-
+ - _1 valeur_ : `border-width: 1em` — La valeur unique s'adresse à tous les côtés. ![](border1.png) + + - _2 valeurs_ : `border-width: 1em 2em` — La première valeur représente les côtés horizontaux en haut et en bas. La seconde valeur représente les côtés verticaux, à gauche et à droite. ![](border2.png) + + - _3 valeurs_ : `border-width: 1em 2em 3em` — La première valeur représente le côté haut, la deuxième les côtés gauche et droit et la troisième représente le côté bas. ![](border3.png) + + - _4 valeurs_ : `border-width: 1em 2em 3em 4em` — Les quatre valeurs représentent respectivement le côté haut, le côté droit, le côté bas et le côté haut, toujours dans cet ordre (le sens horaire). ![](border4.png) 2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : - - - - - - - - - - - - - - - - - - - -
corner1.png - 1 valeur : border-radius: 1em — La valeur - s'applique à tous les coins. -
corner2.png - 2 valeurs : border-radius: 1em 2em — La première - valeur s'applique aux coins en haut à gauche et en bas à droite et la - deuxième s'applique aux coins en haut à droite et en bas à gauche. -
corner3.png - 3 valeurs : border-radius: 1em 2em 3em — La - première valeur représente le coin en haut à gauche, la deuxième - représente les coins en haut à droite et en bas à gauche et la troisième - valeur représente le coin en bas à droite. -
corner4.png -

- 4 valeurs : border-radius: 1em 2em 3em 4em — Les - quatre valeurs s'appliquent respectivement au coin en haut à gauche, - en haut à droite, en bas à droite et en bas à gauche, toujours dans - cet ordre (le sens horaire). -

-
+ - _1 valeur_ : `border-radius: 1em` — La valeur s'applique à tous les coins. ![](corner1.png) + + - _2 valeurs_ : `border-radius: 1em 2em` — La première valeur s'applique aux coins en haut à gauche et en bas à droite et la deuxième s'applique aux coins en haut à droite et en bas à gauche. ![](corner2.png) + + - _3 valeurs_ : `border-radius: 1em 2em 3em` — La première valeur représente le coin en haut à gauche, la deuxième représente les coins en haut à droite et en bas à gauche et la troisième valeur représente le coin en bas à droite. ![](corner3.png) + + - _4 valeurs_ : `border-radius: 1em 2em 3em 4em` — Les quatre valeurs s'appliquent respectivement au coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, toujours dans cet ordre (le sens horaire). ![](corner4.png) ## Les propriétés concernant l'arrière-plan