CSS mask-origin Property
ဥပမာ
အသုံးပြုခြင်း mask-origin: border-box;
နှင့် mask-origin:
content-box;
:
.mask1 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding:
50px;
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: border-box;
mask-origin: border-box;
}
.mask2 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image:
url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size:
80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: content-box;
mask-origin: content-box;
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှု သည် mask-origin
မျက်နှာဖုံးအလွှာပုံတစ်ခု၏ မူလနေရာ (မျက်နှာဖုံးအနေအထား ဧရိယာ) ကို သတ်မှတ်ပေးသည်။
မူလတန်ဖိုး: | နယ်စပ်-သေတ္တာ |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS3 |
JavaScript syntax- | အရာဝတ္ထု .style.maskOrigin="padding-box" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
-webkit- ဖြင့်လိုက်သောနံပါတ်များသည် ရှေ့ဆက်တွဲဖြင့်လုပ်ဆောင်သော ပထမဆုံးဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
mask-origin | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
CSS Syntax
mask-origin:
border-box|content-box|padding-box|margin-box|fill-box|stroke-box|view-box|initial|inherit;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description |
---|---|
border-box | The position is relative to the border box. This is default |
content-box | The position is relative to the content box |
padding-box | The position is relative to the padding box |
margin-box | The position is relative to the margin box |
fill-box | The position is relative to the object bounding box |
stroke-box | The position is relative to the stroke bounding box |
view-box | Use the nearest SVG viewport as reference box |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
နောက်ထပ် ဥပမာများ
ဥပမာ
အသုံးပြုခြင်း mask-origin: border-box;
နှင့် mask-origin:
content-box;
:
.mask1 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding:
50px;
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: border-box;
mask-origin: border-box;
}
.mask2 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image:
url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size:
80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: content-box;
mask-origin: content-box;
}
ဆက်စပ်စာမျက်နှာများ
CSS ရည်ညွှန်းချက်- မျက်နှာဖုံးပုံ ပိုင်ဆိုင်မှု
CSS ရည်ညွှန်းချက်- မျက်နှာဖုံးမုဒ် ပိုင်ဆိုင်မှု
CSS ရည်ညွှန်းချက်- မျက်နှာဖုံးအနေအထား ပိုင်ဆိုင်မှု
CSS ရည်ညွှန်းချက်- mask-repeat ပိုင်ဆိုင်မှု
CSS ရည်ညွှန်းချက်- မျက်နှာဖုံးအရွယ်အစား ပိုင်ဆိုင်မှု
CSS သင်ခန်းစာ- CSS Masking