CSS mask-origin
La proprietà CSS3 mask-origin definisce l'area di riferimento per la posizione della maschera
La proprietà mask-origin in CSS3 determina l'area dell'elemento (border-box, padding-box o content-box) rispetto alla quale viene posizionata la maschera applicata con mask-image. Questo consente un controllo più preciso sul posizionamento e la dimensione della maschera.
Sintassi
mask-origin: border-box | padding-box | content-box;
Significato dei valori principali:
- border-box: La maschera è posizionata rispetto all'intera area del box, compresi bordo, padding e contenuto.
- padding-box: La maschera è posizionata rispetto all'area del box compresa tra bordo interno e bordo del contenuto (cioè padding + contenuto, escluso il bordo).
- content-box: La maschera è posizionata rispetto all'area del contenuto, escludendo padding e bordo.
Esempio proprietà: mask-origin
Codice Esempio: mask-origin
CODE: CSS
.mask-origin-box {
width: 300px;
height: 200px;
margin: 10px;
padding: 20px;
border: 10px solid #50a14f;
background-color: #ff6347;
color: white;
font-size: 18px;
font-weight: bold;
text-align: center;
border-radius: 10px;
mask-image: radial-gradient(circle, black 60%, transparent 100%);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 80% 80%;
-webkit-mask-image: radial-gradient(circle, black 60%, transparent 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 80% 80%;
}.border-box {
mask-origin: border-box;
-webkit-mask-origin: border-box;
}.padding-box {
mask-origin: padding-box;
-webkit-mask-origin: padding-box;
}.content-box {
mask-origin: content-box;
-webkit-mask-origin: content-box;
}
Contenuto Esempio: mask-origin
Esempio di utilizzo di mask-origin
In questo esempio, un'immagine di sfondo ha applicata una maschera con mask-image e cambiamo il punto di riferimento della maschera tramite mask-origin.
mask-origin: border-box
mask-origin: padding-box
mask-origin: content-box
CSS e HTML per l'elemento con mask-origin:
<style>
.mask-origin-box {
width: 300px;
height: 200px;
margin: 10px;
padding: 20px;
border: 10px solid #50a14f;
background-color: #ff6347;
color: white;
font-size: 18px;
font-weight: bold;
text-align: center;
line-height: 190px;
border-radius: 10px;
mask-image: radial-gradient(circle, black 60%, transparent 100%);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 80% 80%;
-webkit-mask-image: radial-gradient(circle, black 60%, transparent 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 80% 80%;
}
.border-box {
mask-origin: border-box;
-webkit-mask-origin: border-box;
}
.padding-box {
mask-origin: padding-box;
-webkit-mask-origin: padding-box;
}
.content-box {
mask-origin: content-box;
-webkit-mask-origin: content-box;
}
</style>
<div>
<div class="mask-origin-box border-box">mask-origin: border-box</div>
<div class="mask-origin-box padding-box">mask-origin: padding-box</div>
<div class="mask-origin-box content-box">mask-origin: content-box</div>
</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
