From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- .../fr/web/css/border-bottom-left-radius/index.md | 137 +++++++++------------ 1 file changed, 58 insertions(+), 79 deletions(-) (limited to 'files/fr/web/css/border-bottom-left-radius/index.md') diff --git a/files/fr/web/css/border-bottom-left-radius/index.md b/files/fr/web/css/border-bottom-left-radius/index.md index be45e9ff52..ce5f525dba 100644 --- a/files/fr/web/css/border-bottom-left-radius/index.md +++ b/files/fr/web/css/border-bottom-left-radius/index.md @@ -7,21 +7,20 @@ tags: - Reference translation_of: Web/CSS/border-bottom-left-radius --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété border-bottom-left-radius définit le rayon de courbure de la bordure pour le coin en bas à gauche de la boîte.

+La propriété **`border-bottom-left-radius`** définit le rayon de courbure de la bordure pour le coin en bas à gauche de la boîte. -
{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}
+{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}} -

L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut 0, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.

+L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut 0, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}. -
-

Note : Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après border-bottom-left-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.

-
+> **Note :** Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après `border-bottom-left-radius`, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de [la propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties). -

Syntaxe

+## Syntaxe -
/* Le coin est un quart de cercle         */
+```css
+/* Le coin est un quart de cercle         */
 /* La valeur indique le rayon de courbure */
 border-bottom-left-radius: 3px;
 
@@ -35,36 +34,31 @@ border-bottom-left-radius: 20%;
 border-bottom-left-radius: 0.5em 1em;
 
 border-bottom-left-radius: inherit;
-
+``` -

Cette propriété peut prendre deux formes :

+Cette propriété peut prendre deux formes : - +- Une première avec une longueur (``) ou un pourcentage (``) qui indique le rayon de courbure pour ce coin +- Une seconde avec deux valeurs -

Valeurs

+ - La première est une longueur (``) ou un pourcentage (``) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin + - La seconde est une longueur (``) ou un pourcentage (``) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin -
-
<length-percentage>
-
La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("<length>")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
-
+### Valeurs -

Syntaxe formelle

+- `` + - : La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("<length>")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées. + +### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
div {
+```css
+div {
   background-color: lightgreen;
   border: solid 1px black;
   width: 100px;
@@ -89,53 +83,38 @@ border-bottom-left-radius: inherit;
   background-color: rgb(250,20,70);
   background-clip: content-box; // essayez margin-box...
 }
-
- -

HTML

- -
 <div class="arc_cercle"></div>
- <div class="arc_ellipse"></div>
- <div class="pourcentage"></div>
- <div class="rognage"></div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","540")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.border-bottom-left-radius")}}

- -

Voir aussi

- -
    -
  • La propriété raccourcie {{cssxref("border-radius")}}
    • -
  • Les propriétés pour les autres coins : -
      -
    • {{cssxref("border-top-right-radius")}},
      • -
    • {{cssxref("border-top-left-radius")}},
      • -
    • {{cssxref("border-bottom-right-radius")}}.
      • -
    -
    • -
+``` + +### HTML + +```html + 
+ 
+ 
+ 
+``` + +### Résultat + +{{EmbedLiveSample("Exemples","200","540")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.border-bottom-left-radius")}} + +## Voir aussi + +- La propriété raccourcie {{cssxref("border-radius")}} +- Les propriétés pour les autres coins : + + - {{cssxref("border-top-right-radius")}}, + - {{cssxref("border-top-left-radius")}}, + - {{cssxref("border-bottom-right-radius")}}. -- cgit v1.2.3-54-g00ecf