radial-gradient function

radial-gradient function သည် အချင်းချင်း ဖြန့်ကျက်မှုကို သတ်မှတ်ပေးသည်။ ဤ function ကို နောက်ခံ ပုံကို သတ်မှတ်ပေးသော properties များတွင် အသုံးပြုသည်- background, background-image သို့မဟုတ် နယ်နိမိတ် ပုံကို သတ်မှတ်ပေးသော properties များ- border-image, border-image-source။

သဒ္ဒါဖွဲ့စည်းပုံ

cssselector {
  background: radial-gradient([ပုံသဏ္ဍာန် အမျိုးအစား တည်နေရာ], အရောင်1 အရွယ်အစား1, အရောင်2 အရွယ်အစား2...);
}

တန်ဖိုးများ

အမျိုးအစားအတွက် တန်ဖိုးများ

မှတ်ချက်

အမျိုးအစားနှင့် ပုံသဏ္ဍာန်ကို နေရာလဲ၍ ရသော်လည်း တည်နေရာမှာမူ ပထမ parameter ၏ နောက်ဆုံးတွင် ရှိရမည်။ ဖြန့်ကျက်မှု အမျိုးအစားနှင့် ၎င်း၏အရွယ်အစားသည် တစ်ခုနှင့်တစ်ခု အလုပ်မလုပ်ပါ (အကြောင်းမှာ ၎င်းတို့သည် ပဋိပက္ခဖြစ်နေသောကြောင့် ဖြစ်သည်)။ အရွယ်အစားကသာ အနိုင်ရသည်။

ဥပမာ . အရှင်းဆုံးသော ရွေးချယ်စရာ

စတင်အရောင်နှင့် နောက်ဆုံးအရောင်ကို သတ်မှတ်ကြည့်ရအောင်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(red, blue);
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ . တည်နေရာ ထည့်ကြည့်ခြင်း

ဗဟို၏ တည်နေရာကို သတ်မှတ်ကြည့်ရအောင်- 30px - ဘယ်ဘက်မှ အကွာအဝေး, 100px - အပေါ်ဘက်မှ အကွာအဝေး-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(at 30px 100px, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ . ရာခိုင်နှုန်းဖြင့် တည်နေရာ

ဗဟို၏ တည်နေရာကို ရာခိုင်နှုန်းဖြင့် သတ်မှတ်ကြည့်ရအောင်- 30% - ဘယ်ဘက်မှ အကွာအဝေး, 50% - အပေါ်ဘက်မှ အကွာအဝေး-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(at 30% 50%, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ . သော့ချက်စာလုံးဖြင့် တည်နေရာ

သော့ချက်စာလုံးများ top, bottom, left, right, center တို့ကို အမျိုးမျိုးသော ပေါင်းစပ်မှုများဖြင့် အသုံးပြုနိုင်သည်။ ဥပမာအားဖြင့် ဖြန့်ကျက်မှုကို ညာဘက် ဗဟိုတွင် ထားကြည့်ရအောင်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(at right center, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ . ဖြန့်ကျက်မှု အရွယ်အစား

ဤကိစ္စတွင် ဖြန့်ကျက်မှုသည် ဤသို့အလုပ်လုပ်မည်- 0px မှ 20px အထိ အနီရောင်သန့်သန့် ရှိမည်, 20px မှ 60px အထိ - အနီရောင်မှ အပြာရောင်သို့ ဖြန့်ကျက်မှု ရှိမည်, 60px နောက်ပိုင်းတွင် - အပြာရောင်သန့်သန့် ရှိမည်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ . အရောင်များကို တစ်ဆက်တည်း အများအပြား

ဤကိစ္စတွင် ဖြန့်ကျက်မှုသည် ဤသို့အလုပ်လုပ်မည်- 0px မှ 20px အထိ အနီရောင်သန့်သန့် ရှိမည်, 20px မှ 40px အထိ အပြာရောင်သန့်သန့် ရှိမည်, 40px မှ 60px အထိ - အပြာရောင်မှ အစိမ်းရောင်သို့ ဖြန့်ကျက်မှု, 60px နောက်ပိုင်းတွင် - အစိမ်းရောင်သန့်သန့် ရှိမည်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ . အရွယ်အစား + တည်နေရာ

အရောင်များအတွက် အရွယ်အစားများနှင့် ဖြန့်ကျက်မှု၏ ဗဟို တည်နေရာကို တစ်ချိန်တည်းတွင် သတ်မှတ်ကြည့်ရအောင်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(at 30px 60px, red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ . ဖြန့်ကျက်မှု၏ ပုံသဏ္ဍာန်

ဖြန့်ကျက်မှု၏ ပုံသဏ္ဍာန်ကို ပထမ parameter ဖြင့် သတ်မှတ်ပေးသည် ထို့ပြင် 2 တန်ဖိုးများကို လက်ခံနိုင်သည်- circle (စက်ဝိုင်းပုံ ဖြန့်ကျက်မှု) သို့မဟုတ် ellipse (ဘဲဥပုံ ဖြန့်ကျက်မှု, ပုံမှန်)။ ယခင်က ဘဲဥပုံ ဖြန့်ကျက်မှုများကို မမြင်ရခြင်း၏ အကြောင်းရင်းမှာ အဘယ်နည်း, ထိုသို့ပင်ဆိုလျှင် ပုံမှန်အားဖြင့် သတ်မှတ်ထားသော်လည်း? အကြောင်းမှာ ယခင်က ဘလောက်များ၏ ပုံသဏ္ဍာန်သည် စတုရန်းပုံ ဖြစ်နေသောကြောင့် ဖြစ်သည်။ အကယ်၍ ကျွန်ုပ်တို့ ပုံသဏ္ဍာန်ကို လေးထောင့်ပုံသို့ ပြောင်းလဲလိုက်ပါက ဘဲဥပုံ ဖြန့်ကျက်မှုကို မြင်တွေ့ရမည်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

ဥပမာ . စက်ဝိုင်းပုံ ဖြန့်ကျက်မှု

လေးထောင့်ပုံ ဘလောက်အတွင်း စက်ဝိုင်းပုံ ဖြန့်ကျက်မှု ဖန်တီးကြည့်ရအောင်။ ဤသို့ပြုလုပ်ရန် ပထမ parameter ဖြင့် ဖြန့်ကျက်မှု၏ ပုံသဏ္ဍာန်ကို သော့ချက်စာလုံး circle ဖြင့် သတ်မှတ်ပေးရမည်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

ဥပမာ . တည်နေရာ ထည့်ကြည့်ခြင်း

ယခင်ကုဒ်သို့ ဖြန့်ကျက်မှု၏ တည်နေရာကို ထပ်မံထည့်ကြည့်ရအောင်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

ဥပမာ . farthest-corner အမျိုးအစား + circle

ဖြန့်ကျက်မှု၏ ပုံသဏ္ဍာန်ကို ဘလောက်၏ ဝေးသောထောင့်သို့ အကွာအဝေး အချက်အလက်ပေါ်တွင် အခြေခံ၍ တွက်ချက်သည်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

ဥပမာ . farthest-corner အမျိုးအစား + ellipse

ဖြန့်ကျက်မှု၏ ပုံသဏ္ဍာန်ကို ဘလောက်၏ ဝေးသောထောင့်သို့ အကွာအဝေး အချက်အလက်ပေါ်တွင် အခြေခံ၍ တွက်ချက်သည်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

ဥပမာ . farthest-side အမျိုးအစား + circle

ဖြန့်ကျက်မှုသည် ဘလောက်၏ ဝေးသောဘေးဘက်အထိ ပျံ့နှံ့သည်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

ဥပမာ . farthest-side အမျိုးအစား + ellipse

ဖြန့်ကျက်မှုသည် ဘလောက်၏ ဝေးသောဘေးဘက်အထိ ပျံ့နှံ့သည်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

ဥပမာ . closest-corner အမျိုးအစား + circle

ဖြန့်ကျက်မှု၏ ပုံသဏ္ဍာန်ကို ဘလောက်၏ အနီးဆုံးထောင့်သို့ အကွာအဝေး အချက်အလက်ပေါ်တွင် အခြေခံ၍ တွက်ချက်သည်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

ဥပမာ . closest-corner အမျိုးအစား + ellipse

ဖြန့်ကျက်မှု၏ ပုံသဏ္ဍာန်ကို ဘလောက်၏ အနီးဆုံးထောင့်သို့ အကွာအဝေး အချက်အလက်ပေါ်တွင် အခြေခံ၍ တွက်ချက်သည်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

ဥပမာ . closest-side အမျိုးအစား + circle

ဖြန့်ကျက်မှု၏ ပုံသဏ္ဍာန်သည် ၎င်းနှင့် အနီးဆုံးရှိ ဘလောက်၏ဘေးဘက်နှင့် ကိုက်ညီသည်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle closest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

ဥပမာ . closest-side အမျိုးအစား + ellipse

ဖြန့်ကျက်မှု၏ ပုံသဏ္ဍာန်သည် ၎င်းနှင့် အနီးဆုံးရှိ ဘလောက်၏ဘေးဘက်နှင့် ကိုက်ညီသည်-

html<div id="elem"></div>

css#elem {
  background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

ဤအကြောင်းကိုလည်း ကြည့်ပါ