CSS conic-gradient() ပုံစံ

အသုံးပြုနည်း နှင့် အသုံးပြုခြင်း

CSS အရ conic-gradient() ပုံစံ အရောင်အဆင်း ကြယ်ရောင်သီးခ�ားဆိုင်းပုံ အား အရိပ်အမှတ် အသုံးပြုပါတယ်。

ကြယ်ရောင်သီးခ�ားဆိုင်းပုံ သည် အရောင်အဆင်း အဆင်းသွားသည် အရှေ့တွင် အရှေ့တွင် စတင်ပြီး အရှေ့တွင် ပြီးဆုံးသော အရောင်အဆင်း အဆင်းသွားသည် (ပုံနှိပ်စားအုပ်ပုံ နှင့် အရောင်အဆင်းရာသီပုံ နှင့် အတူ)

ကြယ်ရောင်သီးခ�ားဆိုင်းပုံ ဖန်တီးရန် အနည်းဆုံး နှစ်ခုရှိသော အရောင်အခြားအချိန်အား အသုံးပြုပါတယ်。

ကြယ်ရောင်သီးခ�ားဆိုင်းပုံ အကြောင်း

အမှတ်

အမှတ် 1 အကြောင်း

သုံးမျိုးရောင်သုံးမျိုးရောင်အား ကြယ်ရောင်သီးခ�ားဆိုင်းပုံ:

#grad {
  background-image: conic-gradient(red, yellow, green);
}

မိမိကို စိစစ်ပါ

အမှတ် 2 အကြောင်း

ငါးမျိုးရောင်သုံးမျိုးရောင်အား ကြယ်ရောင်သီးခ�ားဆိုင်းပုံ:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

မိမိကို စိစစ်ပါ

အမှတ် 3 အကြောင်း

သုံးမျိုးရောင်သုံးမျိုးရောင်အား အချိန်အား အသုံးပြုသော ကြယ်ရောင်သီးခြားဆိုင်းပုံ:

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

မိမိကို စိစစ်ပါ

အမှတ် 4 အကြောင်း

border-radius: 50% ထပ်ပေးခြင်းဖြင့် ကြယ်ရောင်သီးခြားဆိုင်းပုံအား ပုံနှိပ်စားအုပ်ပုံအဖြစ် လှည့်လည်ပါတယ်:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

မိမိကို စိစစ်ပါ

例子 5

带有起始角度的锥形渐变：

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

မိမိကို စိစစ်ပါ

例子 6

带有中心位置的锥形渐变：

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

မိမိကို စိစစ်ပါ

例子 7

同时带有起始角度和中心位置的锥形渐变：

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

မိမိကို စိစစ်ပါ

လက်ရာ 8

အခြား ဂိုးနစ် ပြန်လည်ချက်နှုန်းတိုးဖြည့်

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

မိမိကို စိစစ်ပါ

CSS စနစ်

background-image: conic-gradient([from အဆင်းချိန်] [at စီစဉ်,] အရောင် အားလျော်, အရောင် အားလျော်, ...);

နည်းပါးတိုး

ဘရောက်လာ့တ် အသိအမှတ်

စာရင်းအရ သတ်မှတ်ထားသော စနစ်မှာ ပထမပေါက် သိမ်းသိမ်းခဲ့သော ဘရောက်လာ့တ် အဆိုပါ စနစ် သုံးပုံး သို့မဟုတ် ကွန်ပျူတာ ပုံးပေါ်အတွက် ပြုလုပ်ခဲ့သော အသုံးပြုခြင်း ဖြစ်သည်

ခေတ်ရာပုံပြချက်

သင်ရိုးလမ်း:စတုံးအော်ဝပ်ဝန်း ပြန်လည်ချက်နှုန်းတိုးဖြည့်

参考：ကျွန်း background-image အချက်

参考：စတုံးအော်ဝပ်ဝန်း ပြန်လည်ချက်နှုန်းတိုးဖြည့် လိုဂိတ်() စနစ်

参考：စတုံးအော်ဝပ်ဝန်း ပြန်လည်ချက်နှုန်းတိုးဖြည့် ပီယာလိုဂိတ်() စနစ်

参考：စတုံးအော်ဝပ်ဝန်း ပြန်လည်ချက်နှုန်းတိုးဖြည့် သီဟရိုဂေါ စနစ်

参考：စတုံးအော်ဝပ်ဝန်း ပြန်လည်ချက်နှုန်းတိုးဖြည့် ပေါ့ပိုင်းအသား() စနစ်

参考：CSS repeating-radial-gradient() 函数