Représente l'état d'avancement d'une tâche
Propriété CSS 'mask-clip'
La propriété CSS 'mask-clip' détermine la région de l'élément masqué à afficher. Elle peut prendre les valeurs suivantes :
- border-box : l'élément masqué est découpé aux limites du bord
- padding-box : l'élément masqué est découpé aux limites du rembourrage
- content-box : l'élément masqué est découpé aux limites du contenu
Exemple
Supposons que nous ayons un élément <div> avec un fond bleu et un texte rouge :
Exemple : Copier le code
<div style="background-color: blue; color: red;">
Texte visible
</div>
Nous pouvons utiliser la propriété mask-clip pour masquer une partie de l'élément :
Exemple : Copier le code
<div style="background-color: blue; color: red; mask-clip: border-box;">
Texte visible
</div>
Conseils et astuces
- La propriété mask-clip doit être utilisée conjointement avec la propriété mask-image pour être efficace.
- Il est recommandé d'utiliser une image vectorielle pour la propriété mask-image pour une meilleure qualité d'affichage.
- La propriété mask-clip n'est pas prise en charge par tous les navigateurs, il est donc important de vérifier la compatibilité avec les navigateurs cibles avant de l'utiliser.
Voici la syntaxe générale pour utiliser la propriété CSS 'mask-clip' :
mask-clip: [value];
Où [value] peut prendre les valeurs suivantes : border-box, padding-box et content-box
| Valeurs par défaut | border-box |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | element.style.maskClip = "border-box"; |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 53 -webkit- | 79 | 35 -moz- | 9 -webkit- | 40 |