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

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

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

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

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

တန်ဖိုးများ

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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