Proprietà mask-clip CSS

Definizione e utilizzo

mask-clip L'attributo viene utilizzato per specificare l'area influenzata dall'immagine di maschera.

esempio

visualizzazione mask-clip valori diversi dell'attributo:

.masked {
  width: 150px;
  height: 150px;
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 100% 100%;
}
.mask1 {
  mask-clip: border-box;
}
.mask2 {
  mask-clip: content-box;
}
.mask3 {
  mask-clip: padding-box;
}
.mask4 {
  mask-clip: fill-box;
}
.mask5 {
  mask-clip: stroke-box;
}

Prova personalmente

Sintassi CSS

mask-clip: border-box|content-box|padding-box|fill-box|stroke-box|view-box|no-clip|border|padding|content|text|initial|inherit;

Valore dell'attributo

Valore Descrizione
border-box Il contenuto disegnato viene tagliato alla scatola del bordo (border box). Valore predefinito.
content-box Il contenuto disegnato viene tagliato alla scatola del contenuto (content box).
padding-box Il contenuto disegnato viene tagliato alla scatola del margine interno (padding box).
fill-box Il contenuto disegnato viene tagliato alla scatola dei limiti dell'oggetto (object bounding box).
stroke-box Il contenuto disegnato viene tagliato al perimetro della scatola di traccia (stroke bounding box).
view-box Usare il最近的 SVG viewport come scatola di riferimento.
no-clip Non eseguire il taglio.
border Uguale a border-box.
padding Uguale a padding-box.
content Uguale a content-box.
text Tagliare la maschera al testo dell'elemento.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: border-box
Ereditarietà: No
Produzione di animazioni: Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione: Modulo di Maschera CSS Livello 1
Sintassi JavaScript: object.style.maskClip="padding-box"

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente l'attributo.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Pagine correlate

Lezione:Soffietto CSS

Riferimento:Proprietà mask CSS

Riferimento:Proprietà mask-composite CSS

Riferimento:Proprietà mask-image CSS

Riferimento:Proprietà mask-mode CSS

Riferimento:Proprietà mask-origin CSS

Riferimento:Proprietà mask-position CSS

Riferimento:Proprietà mask-repeat CSS

Riferimento:Proprietà mask-size CSS

Riferimento:Proprietà mask-type CSS