From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/border-top-left-radius/index.html | 136 --------------------- files/fr/web/css/border-top-left-radius/index.md | 136 +++++++++++++++++++++ 2 files changed, 136 insertions(+), 136 deletions(-) delete mode 100644 files/fr/web/css/border-top-left-radius/index.html create mode 100644 files/fr/web/css/border-top-left-radius/index.md (limited to 'files/fr/web/css/border-top-left-radius') diff --git a/files/fr/web/css/border-top-left-radius/index.html b/files/fr/web/css/border-top-left-radius/index.html deleted file mode 100644 index 0c34d5e94d..0000000000 --- a/files/fr/web/css/border-top-left-radius/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: border-top-left-radius -slug: Web/CSS/border-top-left-radius -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/border-top-left-radius ---- -
{{CSSRef}}
- -

La propriété border-top-left-radius définit le rayon de courbure de la bordure pour le coin en haut à gauche de la boîte. 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")}}.

- -
{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}
- -
-

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-top-left-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.

-
- -

Syntaxe

- -
/* Le coin est un quart de cercle         */
-/* La valeur indique le rayon de courbure */
-border-top-left-radius: 3px;
-
-/* Le coin est un quart d'ellipse         */
-/* La première valeur indique le demi-axe */
-/* horizontal et la seconde le demi-axe   */
-/* vertical                               */
-border-top-left-radius: 0.5em 1em;
-
-border-top-left-radius: inherit;
-
- -

Cette propriété peut prendre deux formes :

- - - -

Valeurs

- -
-
<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.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

CSS

- -
div {
-  background-color: lightgreen;
-  border: solid 1px black;
-  width: 100px;
-  height: 130px;
-}
-
-.arc_cercle {
-  border-top-left-radius: 40px 40px;
-}
-
-.arc_ellipse {
-  border-top-left-radius: 40px 20px;
-}
-
-.pourcentage {
-  border-top-left-radius: 40%;
-}
-
-.rognage {
-  border: black 10px double;
-  border-top-left-radius: 40%;
-  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', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/css/border-top-left-radius/index.md b/files/fr/web/css/border-top-left-radius/index.md new file mode 100644 index 0000000000..0c34d5e94d --- /dev/null +++ b/files/fr/web/css/border-top-left-radius/index.md @@ -0,0 +1,136 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/border-top-left-radius +--- +
{{CSSRef}}
+ +

La propriété border-top-left-radius définit le rayon de courbure de la bordure pour le coin en haut à gauche de la boîte. 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")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}
+ +
+

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-top-left-radius, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.

+
+ +

Syntaxe

+ +
/* Le coin est un quart de cercle         */
+/* La valeur indique le rayon de courbure */
+border-top-left-radius: 3px;
+
+/* Le coin est un quart d'ellipse         */
+/* La première valeur indique le demi-axe */
+/* horizontal et la seconde le demi-axe   */
+/* vertical                               */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+
+ +

Cette propriété peut prendre deux formes :

+ + + +

Valeurs

+ +
+
<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.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

CSS

+ +
div {
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 130px;
+}
+
+.arc_cercle {
+  border-top-left-radius: 40px 40px;
+}
+
+.arc_ellipse {
+  border-top-left-radius: 40px 20px;
+}
+
+.pourcentage {
+  border-top-left-radius: 40%;
+}
+
+.rognage {
+  border: black 10px double;
+  border-top-left-radius: 40%;
+  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', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf