oujood.com

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

La propriété CSS 'mask-clip', y compris la syntaxe générale, les valeurs possibles, des exemples et des conseils et astuces pour une utilisation efficace.

chercher |

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

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion53 -webkit-7935 -moz- 9 -webkit- 40





Voir aussi nos tutoriel :

font-style

Indique le style de police pour le texte

 Détermine si une variable est définie et est différente de NULL">isset

 Détermine si une variable est définie et est différente de NULL

la propriété border-top-left-radius

Définit la forme du coin supérieur gauche de la frontière