CSS inset() ပုံစံ

အဆင်းပြင် အရှေ့ဆုံး စက်တင်လက်ရာ hypot() ပုံစံ
အဆင်းပြင် နောက်ဆုံး စက်တင်လက်ရာ invert() ပုံစံ
အဆင်းပြင် ပြန်ခြင်း CSS ပြောင်းလဲပုံ လျှပ်စစ်စာအုပ်

ဖော်ပြ နှင့် အသုံးပြု

CSS မှ inset() အချက်အလက် ကို အသုံးပြု

inset() အချက်အလက် နှင့် clip-path အချက်အလက် နှင့် shape-outside အချက်အလက် အတူ အသုံးပြု

အမှတ်

အမှတ် 1

နှစ်ခုသော <div> အရာများ ကို ကိုယ်စားပြုသည်။

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(15px);
}
#pinkDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: pink;
  clip-path: inset(5% 10% 15% 10% round 20px);
}

ကိုယ်တိုင် ကြိုးစားပါ

အမှတ် 2

အသုံးပြု clip-path နှင့် inset() လှည့်ပန်းလုပ်ပုံပြု

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: inset(10% round 20px);
}
@keyframes mymove {
  50% {clip-path: inset(50% round 50px);}
}

ကိုယ်တိုင် ကြိုးစားပါ

အမှတ် 3

တစ်ခုတည်းဖြင့် အသုံးပြု inset()、clip-path နှင့် shape-outside:

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(45px 50px 15px 0 round 50px);
  shape-outside: inset(40px 40px 10px 0 round 50px);
}

ကိုယ်တိုင် ကြိုးစားပါ

CSS ပုံစံ

inset(length-percentage round border-radius)

အရာ	ဖော်ပြ
length-percentage	လိုအပ်သည်။ 1 ထိ 4 ခု သို့မဟုတ် အတွက် အစိတ်အလှယ် သို့မဟုတ် စက္ခုတိုင်း အပါအဝင် သုံးခုသို့ ဖြင့် ကုဒ်ထည် ပေါ်မှ ကိုယ်စားပြုသည်။
round border-radius	လိုအပ်သလိုသည်ကို ချမှတ်ထားပါလျှင် ပါဝင်သော အင်္ဂါပုံ အမှတ်များ အား အဆိုပါ ပြောင်းလဲသည်ကို အသုံးပြုပါ。