CSS మాస్క్-ఓరిజిన్ అట్రిబ్యూట్

నిర్వచనం మరియు వినియోగం

mask-origin అనిమేషన్ రూపకల్పనను సూచించే లక్షణం (అనిమేషన్ స్థానం ప్రాంతం).

ఉదాహరణ

ప్రదర్శన mask-origin లక్షణానికి వివిధ విలువలు:

.masked {
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask1 {
  mask-origin: border-box;
}
.mask2 {
  mask-origin: content-box;
}
.mask3 {
  mask-origin: padding-box;
}
.mask4 {
  mask-origin: fill-box;
}

స్వయంగా ప్రయోగించండి

CSS సంకేతబద్ధం

mask-origin: border-box|content-box|padding-box|fill-box|stroke-box|view-box|initial|inherit;

లక్షణానికి విలువ

విలువ వివరణ
border-box బార్డర్ బాక్స్ పైన స్థానం ఉంటుంది. అప్రమేయ విలువ.
content-box కంటెంట్ బాక్స్ పైన స్థానం ఉంటుంది.
padding-box ఇన్నర్ బాక్స్ పైన స్థానం ఉంటుంది.
fill-box ఆప్లికేషన్ బాక్స్ పైన స్థానం ఉంటుంది.
stroke-box కాంట్రాయింట్ బాక్స్ పైన స్థానం ఉంటుంది.
view-box సమీప ఎస్విజి వీక్స్ ను పరిగణనలోకి తీసుకుంటుంది.
initial ఈ లక్షణాన్ని దాని అప్రమేయ విలువకు సెట్ చేయండి. ఈ కి పరిశీలించండి: initial。
inherit ఈ లక్షణాన్ని తన పేర్వస్థి నుండి పారంపర్యం చేసుకుంటుంది. ఈ కి పరిశీలించండి: inherit。

సాంకేతిక వివరాలు

అప్రమేయ విలువ: border-box
పారంపర్యం సామర్థ్యం: సంక్షిప్తంగా లేదు
అనిమేషన్ నిర్మాణం: మద్దతు లేదు. దయచేసి ఈ కి పరిశీలించండి:అనిమేషన్ సంబంధిత లక్షణాలు。
వెర్షన్: CSS మాస్కింగ్ మొడ్యూల్ లెవల్ 1
జావాస్క్రిప్ట్ సంకేతబద్ధం: object.style.maskOrigin="padding-box"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇస్తున్న బ్రౌజర్ సంస్కరణను సూచిస్తాయి。

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
120 120 53 15.4 106

相关页面

ట్యూటోరియల్:CSS మాస్క్

పరిచయం:CSS మాస్క్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-క్లిప్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-కాంపోజిట్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-ఇమేజ్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-మోడ్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-పోజిషన్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-రీపీట్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-సైజ్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-టైప్ అట్రిబ్యూట్