From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/mask-clip/index.html | 130 ++++++++++++++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 files/fr/web/css/mask-clip/index.html (limited to 'files/fr/web/css/mask-clip') diff --git a/files/fr/web/css/mask-clip/index.html b/files/fr/web/css/mask-clip/index.html new file mode 100644 index 0000000000..33e7499059 --- /dev/null +++ b/files/fr/web/css/mask-clip/index.html @@ -0,0 +1,130 @@ +--- +title: mask-clip +slug: Web/CSS/mask-clip +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-clip +--- +
{{CSSRef}}
+ +

La propriété mask-clip définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.

+ +

{{cssinfo}}

+ +

Syntaxe

+ +
/* Valeurs de type <geometry-box> */
+mask-clip: content-box;
+mask-clip: padding-box;
+mask-clip: border-box;
+mask-clip: margin-box;
+mask-clip: fill-box;
+mask-clip: stroke-box;
+mask-clip: view-box;
+
+/* Valeurs avec un mot-clé */
+mask-clip: no-clip;
+
+/* Valeurs multiples */
+mask-clip: padding-box, no-clip;
+mask-clip: view-box, fill-box, border-box;
+
+/* Mots-clés non-standards */
+-webkit-mask-clip: border;
+-webkit-mask-clip: padding;
+-webkit-mask-clip: content;
+-webkit-mask-clip: text;
+
+/* Valeurs globales */
+mask-clip: inherit;
+mask-clip: initial;
+mask-clip: unset;
+
+ +

Syntaxe

+ +

Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.

+ +

Valeurs

+ +
+
content-box
+
La partie qui est « peinte » est rognée sur la boîte de contenu.
+
padding-box
+
La partie qui est « peinte » est rognée sur la boîte de padding.
+
border-box
+
La partie qui est « peinte » est rognée sur la boîte de bordure.
+
margin-box
+
La partie qui est « peinte » est rognée sur la boîte de marge.
+
fill-box
+
La partie qui est « peinte » est rognée sur la boîte contenant l'objet.
+
stroke-box
+
La partie qui est « peinte » est rognée sur la boîte contenant le contour.
+
view-box
+
C'est le viewport du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut viewBox est défini pour l'élément qui crée le viewport, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut viewBox et les dimensions de la boîtes sont basées sur la hauteur et la largeur de l'attribut viewBox.
+
no-clip
+
La partie qui est « peinte » n'est pas rognée.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  margin: 20px;
+  border: 20px solid #8ca0ff;
+  padding: 20px;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-clip: border;
+  mask-clip: border-box;
+}
+
+ +

HTML

+ +
<div id="masked"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "220px", "250px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}}{{Spec2("CSS Masks")}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.mask-clip")}}

-- cgit v1.2.3-54-g00ecf