Proprietà mask-clip CSS
- Pagina precedente mask
- Pagina successiva mask-composite
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; }
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
- Pagina precedente mask
- Pagina successiva mask-composite