CSS circle() ပုံစံ

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

CSS ၏ circle() ပုံစံ ကို အသုံးပြုခြင်း

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

အကျိုးဆက်

အမှတ် 1

ယူကြောင်း အရှိန်ထိပ် အား 50% အကြား ပုံစံကို ကြိုးတုပ်ထား သည်။

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

ကိုယ်တိုင် ကျယ်ပြန်မှု

အမှတ် 2

ယူကြောင်း အရှိန်ထိပ် အား 50% အကြား ဖြင့် ပုံစံကို ကြိုးတုပ်ထား သည်။

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

ကိုယ်တိုင် ကျယ်ပြန်မှု

အမှတ် 3

အသုံးပြုခြင်း clip-path နှင့် circle() လှည့်ခြင်း ဖြစ်ပေါ်စေမှု

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

ကိုယ်တိုင် ကျယ်ပြန်မှု

အမှတ် 4

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

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

ကိုယ်တိုင် ကျယ်ပြန်မှု

CSS အပြောင်းအလဲ

circle(radius အခြေခံ ပုံစံ)

နည်းပါးစွာ

ဘွတ်ကျော်စက် ကူညီ

စက်တင်အချက်အလက်များ သည် အပြော်ပျက်သည့် ဘွတ်ကျော်စက် ပုံစံအား အထူးသဖြင့် ကူညီပေးသော ဘွတ်ကျော်စက် မူကွဲမျိုး ကို မြင်ခဲ့သည်။

လျှက်ပေါင်း

参考：CSS clip-path 属性

参考：စက်တင်ချိန် ပြန်လည်လမ်းကြောင်း အပုံ

参考：CSS ellipse() ပုံစံ

参考：CSS inset() 函数

参考：CSS polygon() 函数