ဖန်ရှင် repeating-linear-gradient

ဖန်ရှင် repeating-linear-gradient သည် ထပ်ခါထပ်ခါဖြစ်သော ရှေ့တည့်တည့် ရောင်စဉ်တန်းကို သတ်မှတ်ပေးပါသည်။ ဆိုလိုသည်မှာ ကျွန်ုပ်တို့သည် ရောင်စဉ်တန်း၏ ပုံစံတစ်ခုကို သတ်မှတ်ပေးခြင်းဖြစ်သည်။ ဥပမာ၊ 0px မှ 10px အထိ - အနီရောင်မှ အပြာရောင်သို့ ရောင်စဉ်တန်းဖြစ်ပြီး ဤရောင်စဉ်တန်းသည် ဘလောက်တစ်ခုလုံးတွင် ထပ်ခါထပ်ခါဖြစ်နေမည်။ 0px မှ 10px, 10px မှ 20px, 20px မှ 30px စသည်ဖြင့် ဖြစ်ပါသည်။

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

ဝါကျဖွဲ့စည်းပုံ

selector {
	background: repeating-linear-gradient([direction], color1 size1, color2 size2...);
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
direction	မည်သည့် ထောင့်ယူနစ်ဖြင့်မဆို သို့မဟုတ် သော့ချက်စကားလုံးများဖြစ်သည့် `top`, `left`, `right`, `bottom` သို့မဟုတ် ၎င်းတို့၏ ပေါင်းစပ်မှုဖြင့် ရောင်စဉ်တန်း၏ ဦးတည်ချက်ကို သတ်မှတ်ပေးသည်။ စကားလုံးအစီအစဥ်သည် အရေးမကြီးပါ။ ဤအကန့်သည် မဖြစ်မနေထည့်ရန်မလိုပါ။ သတ်မှတ်မထားပါက၊ ရောင်စဉ်တန်းသည် အပေါ်မှ အောက်သို့ သွားမည်။ ဦးတည်ချက်မတိုင်မီတွင် စကားလုံး `to` ကို ထည့်ရသည်။
angle	မည်သည့် ထောင့်ယူနစ်တွင်မဆို ထောင့်။ အပေါင်းတန်ဖိုး သို့မဟုတ် အနှုတ်တန်ဖိုး ဖြစ်နိုင်သည်။ အကန့်သည် မဖြစ်မနေထည့်ရန်မလိုပါ။ တစ်ချိန်တည်းတွင် ထောင့် သို့မဟုတ် ဦးတည်ချက် (သို့မဟုတ် ဘာမှမပါဘဲ) ကို သတ်မှတ်နိုင်သည်။
color1	မည်သည့် အရောင်ယူနစ်တွင်မဆို ရောင်စဉ်တန်း၏ အစအရောင်။
color2	မည်သည့် အရောင်ယူနစ်တွင်မဆို ရောင်စဉ်တန်း၏ အဆုံးအရောင်။
size	မည်သည့် အရွယ်အစားယူနစ်တွင်မဆို ရောင်စဉ်တန်းတစ်ခု၏ အရောင်တစ်ခု၏ ကျယ်ပြန့်မှုကို သတ်မှတ်ပေးသည်။

ဥပမာ . အရိုးရှင်းဆုံးပုံစံ

ရောင်စဉ်တန်းသည် ဤသို့ပုံပေါက်ပါမည်။ 0px မှ 20px အထိ အနီရောင်အစစ်၊ 20px မှ 40px အထိ - အနီရောင်မှ အပြာရောင်သို့ ရောင်စဉ်တန်း။ ထို့နောက် အပေါ်မှ အောက်သို့ ထပ်ခါထပ်ခါဖြစ်နေမည် (ထပ်ခါထပ်ခါဖြစ်သော ရောင်စဉ်တန်းဖြစ်သောကြောင့်)။

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

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

ဥပမာ . သတ်သတ်လွတ်အရောင်များ

ရောင်စဉ်တန်းသည် ဤသို့ပုံပေါက်ပါမည်။ 0px မှ 20px အထိ အနီရောင်အစစ်၊ 20px မှ 40px အထိ - အပြာရောင်အစစ် (အဓိကအချက်မှာ ဒုတိယအရောင်သည် ပထမအရောင် ပြီးဆုံးသော နေရာတွင် စတင်ခြင်းဖြစ်သည်)။ ထို့နောက် အပေါ်မှ အောက်သို့ ထပ်ခါထပ်ခါဖြစ်နေမည်။

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

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

ဥပမာ . ဦးတည်ချက်ကို ပြောင်းလဲကြည့်ပါ

ယခု ရောင်စဉ်တန်း၏ ဦးတည်ချက်သည် ညာဘက်မှ ဘယ်ဘက်သို့ ဖြစ်လာမည်။

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

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

ဥပမာ . ဒီဂရီဖြင့် ဦးတည်ချက်

ဦးတည်ချက်အဖြစ် ဒီဂရီဖြင့် ထောင့်တစ်ခုကို သတ်မှတ်ပါမည်။

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

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

ဥပမာ . အနှုတ်တန်ဖိုး

ဦးတည်ချက်ကို အနှုတ်တန်ဖိုးဖြင့် သတ်မှတ်ကြည့်ပါမည်။

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

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

ဤသည်ကိုလည်း ကြည့်ပါ

ဖန်ရှင် repeating-radial-gradient,
သည် ထပ်ခါထပ်ခါဖြစ်သော ဗဟိုခံရောင်စဉ်တန်းကို ဖန်တီးပေးသည်
ဖန်ရှင် linear-gradient,
သည် ရှေ့တည့်တည့် ရောင်စဉ်တန်းကို ဖန်တီးပေးသည်
ဖန်ရှင် radial-gradient,
သည် ဗဟိုခံရောင်စဉ်တန်းကို ဖန်တီးပေးသည်