mask-clip

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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

Valeur initialeborder-box
Applicabilitétous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments defs et des éléments graphiques
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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;

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

[ <geometry-box> | no-clip ]#


<geometry-box> = <shape-box> | fill-box | stroke-box | view-box


<shape-box> = <box> | margin-box


<box> = border-box | padding-box | content-box

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

Spécifications

Spécification État Commentaires
CSS Masking Level 1
La définition de 'mask-clip' dans cette spécification.
Candidat au statut de recommandation Définition initiale

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple (Oui)-webkit Pas de support[1] Pas de support (Oui)-webkit (Oui)-webkit
border, padding, content, text 1.0-webkit Pas de support Pas de support (Oui) 4.0-webkit
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? Pas de support[1] Pas de support ? ?
border, padding, content, text 2.1-webkit Pas de support[1] Pas de support ? 3.2-webkit

[1] Cette fonctionnalité n'est pas encore implémentée sur tous les canaux, elle est uniquement disponible pour les canaux Nightly et Dev Edition (cf. bug 1251161).

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,