CSS mask-clip
La proprietà CSS3 mask-clip controlla l'area a cui viene applicata la maschera
La proprietà mask-clip in CSS3 definisce l'area del box dell’elemento HTML su cui la maschera viene effettivamente applicata. È utile per controllare se la maschera deve limitarsi all'area del contenuto, includere il padding, oppure coprire anche il bordo. Funziona insieme a mask-image, mask-size e altre sottoproprietà della maschera.
Sintassi
Significato dei valori principali:
-
border-box: La maschera viene applicata fino al bordo dell’elemento (include padding e contenuto).
-
padding-box: La maschera si applica fino al padding, escludendo il bordo.
-
content-box: La maschera copre solo l’area del contenuto, escludendo padding e bordo.
-
no-clip: La maschera non è ritagliata da alcun box (può debordare completamente).
Esempio proprietà: mask-clip
Codice Esempio: mask-clip
.box-mask {
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid #ddd;
background-color: #4078f2;
mask-image: radial-gradient(circle, black 60%, transparent 100%);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 100% 100%;
-webkit-mask-image: radial-gradient(circle, black 60%, transparent 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 100% 100%;
}.border-box-mask {
mask-clip: border-box;
-webkit-mask-clip: border-box;
}.padding-box-mask {
mask-clip: padding-box;
-webkit-mask-clip: padding-box;
}.content-box-mask {
mask-clip: content-box;
-webkit-mask-clip: content-box;
}
Contenuto Esempio: mask-clip
Esempio di utilizzo di mask-clip
In questo esempio, la proprietà mask-clip viene utilizzata per definire l'area del box su cui la maschera viene effettivamente applicata. Osserva la differenza tra border-box, padding-box e content-box.
CSS e HTML per l'elemento con mask-clip:
<style>
.mask-clip-example {
width: 200px;
height: 200px;
margin: 20px;
padding: 20px;
border: 10px solid #ccc;
background-color: #4078f2;
font-size: 16px;
color: white;
text-align: center;
line-height: 160px;
font-weight: bold;
display: inline-block;
mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 60%, transparent 100%);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 100% 100%;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 60%, transparent 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 100% 100%;
}
.border-box-mask {
mask-clip: border-box;
-webkit-mask-clip: border-box;
}
.padding-box-mask {
mask-clip: padding-box;
-webkit-mask-clip: padding-box;
}
.content-box-mask {
mask-clip: content-box;
-webkit-mask-clip: content-box;
}
</style>
<div class="mask-clip-example border-box-mask">border-box</div>
<div class="mask-clip-example padding-box-mask">padding-box</div>
<div class="mask-clip-example content-box-mask">content-box</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
