radial-gradient function

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

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

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

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
ပုံသဏ္ဍာန်	လက်ခံသော တန်ဖိုးများ- `ellipse` ဘဲဥပုံ ဖြန့်ကျက်မှု (ပုံမှန်), `circle` စက်ဝိုင်းပုံ ဖြန့်ကျက်မှု။
အမျိုးအစား	ဖြန့်ကျက်မှု၏ ဆန့်ထုတ်မှုကို သတ်မှတ်ပေးသည်။ လက်ခံသော တန်ဖိုးများ- `closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`.
တည်နေရာ	`at` ဆိုသော သော့ချက်စာလုံးပြီးနောက် အရွယ်အစားအတွက် ယူနစ်များ တွင် မည်သည့်တန်ဖိုးဖြင့်မဆို သို့မဟုတ် သော့ချက်စာလုံးများ `top`, `bottom`, `left`, `right`, `center` များကို အမျိုးမျိုးသော ပေါင်းစပ်မှုများဖြင့် သတ်မှတ်ပေးသည်။
အရောင်1	ဖြန့်ကျက်မှု၏ စတင်အရောင်ကို အရောင်အတွက် ယူနစ်များ တွင် မည်သည့်တန်ဖိုးဖြင့်မဆို သတ်မှတ်ပေးသည်။
အရောင်2	ဖြန့်ကျက်မှု၏ နောက်ဆုံးအရောင်ကို အရောင်အတွက် ယူနစ်များ တွင် မည်သည့်တန်ဖိုးဖြင့်မဆို သတ်မှတ်ပေးသည်။
အရွယ်အစား	ဖြန့်ကျက်မှု၏ တစ်ခုသောအရောင်၏ ကျယ်ပြန့်မှုကို အရွယ်အစားအတွက် ယူနစ်များ တွင် မည်သည့်တန်ဖိုးဖြင့်မဆို သတ်မှတ်ပေးသည်။

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

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

မှတ်ချက်

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

linear-gradient function,
အလျားလိုက် ဖြန့်ကျက်မှုကို ဖန်တီးပေးသည်
repeating-linear-gradient function,
အထပ်ထပ်ဖြစ်သော အလျားလိုက် ဖြန့်ကျက်မှုကို ဖန်တီးပေးသည်
repeating-radial-gradient function,
အထပ်ထပ်ဖြစ်သော အချင်းချင်း ဖြန့်ကျက်မှုကို ဖန်တီးပေးသည်