Apprenez à maîtriser la propriété CSS 'mask-clip' avec des astuces et exemples

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

Prise en charge de la propriété dans les navigateurs

Explorateur
Verssion	53 -webkit-	79	35 -moz-	9 -webkit-	40