CSS ellipse() ပုံစံ

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

CSS အတွက် ellipse() ပုံစံ အချက်အလက် တစ်ခုခု ကို သတ်မှတ်ပါ။ အောက်ပါ အတိုင်း ဖြစ်နိုင်သည်: x နှင့် y အရှိန် နှစ်ခုကို ပါဝင်သည်။

ellipse() ပုံစံ clip-path အချက်အလက် shape-outside အချက်အလက် တစ်ခုခုကို အသုံးပြုပါ

အမှတ်အရာ

အမှတ် 1

အရှိန် x 50% နှင့် y 30% အရှိန်အထိ အီလီယာလ် ကို အရောက်သွားပါ:

img {
  clip-path: ellipse(50% 30%);
}

ကိုယ်တိုင် ကျယ်ပါ

အမှတ် 2

အရှိန် x 50% နှင့် y 30% အရှိန်အထိ အီလီယာလ် ကို အရောက်သွားပြီး အီလီယာလ် အရှိန် အချက်အလက် ကို အရှိန် right အထိ ချိတ်ဆက်ပါ:

img {
  clip-path: ellipse(50% 30% at right);
}

ကိုယ်တိုင် ကျယ်ပါ

အမှတ် 3

အသုံးပြုပါ clip-path နှင့် ellipse() လှုပ်ရှား အကျိုးသတ်မှတ်ပါ

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

ကိုယ်တိုင် ကျယ်ပါ

အမှတ် 4

တစ်ခုခုကို အသုံးပြုပါ ellipse()နှင့်clip-path နှင့် shape-outside:

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

ကိုယ်တိုင် ကျယ်ပါ

CSS ပုံစံအရာ

ellipse(xy-radius အခြေခံ အရှိန်)

နည်းပညာ အချက်အလက်

ဘွတ်စက် အထောက်အပံ့

အချက်အလက် အရ အပြောင်းအလဲ မရှိသေးသော ဘွတ်စက် ကို ပြထားသည်။

လုပ်သုံးနိုင်သော စာမျက်နှာ

ကိုးကားစက်တင်အိတ် အကျယ် အပြောက်

ကိုးကားCSS shape-outside 属性

ကိုးကားCSS စက်ရုံး() ပုံစံ

ကိုးကားCSS အော်ငွေ့-ပုံပေါ်() ဘွ数

ကိုးကားCSS အော်ငွေ့-ပုံပေါ်() ဘွ数