linear-gradient လုပ်ဆောင်ချက်

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

ဝါကျဖွဲ့ပုံ

cssselector {
  background: linear-gradient([ထောင့်သို့မဟုတ် ဦးတည်ချက်], color1 size1, color2 size2...);
}

တန်ဖိုးများ

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

ဝါကျဖွဲ့ပုံ:

cssselector {
  background: linear-gradient(start color, end color);
}

ဥပမာဖြင့် ကြည့်ကြပါစို့:

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

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

Результат:

ဥပမာ . ထောင့်ကို ထည့်ခြင်း

ဝါကျဖွဲ့ပုံ:

cssselector {
  background: linear-gradient(angle, start color, end color);
}

ဥပမာဖြင့် ကြည့်ကြပါစို့:

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

css#elem {
  background: linear-gradient(45deg, black, red);
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ . ဦးတည်ချက်ကို ထည့်ခြင်း

ထောင့်အစား ဦးတည်ချက်ကို ထည့်နိုင်သည်။ top, left, right, bottom သို့မဟုတ် ၎င်းတို့၏ ပေါင်းစပ်မှုများtop left, top right ဦးတည်ချက်၏ ရှေ့တွင် to ဟူသော စကားလုံးကို ထည့်ရသည်။

ဝါကျဖွဲ့ပုံ:

cssselector {
  background: linear-gradient(direction, start color, end color);
}

ဥပမာဖြင့် ကြည့်ကြပါစို့:

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

css#elem {
  background: linear-gradient(to left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ . ဦးတည်ချက်ကို ထည့်ခြင်း

အခြားဦးတည်ချက်ကို သတ်မှတ်ကြည့်ပါ:

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

css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ . အရွယ်အစားကို ထည့်ခြင်း

ဝါကျဖွဲ့ပုံ:

cssselector {
  background: linear-gradient(color1 size1, color2 size2);
}

အောက်ပါဥပမာတွင် လုပ်ဆောင်ချက်မှာ အောက်ပါအတိုင်းဖြစ်သည်- အနီရောင်စင်ကြယ်သောအရောင်သည် 0px မှ 30px အထိဖြစ်ပြီး၊ 30px မှ 50px အထိ အနီရောင်မှ အပြာရောင်သို့ ရောင်စဉ်တန်းဖြစ်ကာ၊ 50px နှင့် အဆုံးအထိ အနီရောင်မှ အပြာရောင်သို့ ရောင်စဉ်တန်းဖြစ်သည်-

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

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

Результат:

ဥပမာ . 2 ထက်ပိုသော အရောင်များကို ထည့်ခြင်း

ဝါကျဖွဲ့ပုံ:

cssselector {
  background: linear-gradient(color1 size1, color2 size2, color3 size3...);
}

အောက်ပါဥပမာတွင် လုပ်ဆောင်ချက်မှာ အောက်ပါအတိုင်းဖြစ်သည်- အနီရောင်စင်ကြယ်သောအရောင်သည် 0px မှ 30px အထိဖြစ်ပြီး၊ 30px မှ 50px အထိ အနီရောင်မှ အပြာရောင်သို့ ရောင်စဉ်တန်းဖြစ်ကာ၊ 50px မှ 70px အထိ အပြာရောင်မှ အစိမ်းရောင်သို့ ရောင်စဉ်တန်းဖြစ်ပြီး၊ 70px နောက်ပိုင်းတွင် အစိမ်းရောင်စင်ကြယ်သောအရောင်ဖြစ်သည်-

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

css#elem {
  background: linear-gradient(red 30px, blue 50px, green 70px);
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ . ရုတ်တရက် အပြောင်းအလဲများ

အောက်ပါဥပမာတွင် လုပ်ဆောင်ချက်မှာ အောက်ပါအတိုင်းဖြစ်သည်- အနီရောင်စင်ကြယ်သောအရောင်သည် 0px မှ 30px အထိဖြစ်ပြီး၊ အပြာရောင်စင်ကြယ်သောအရောင်သည် 30px မှ 60px အထိဖြစ်ကာ၊ အစိမ်းရောင်စင်ကြယ်သောအရောင်သည် 60px နောက်ပိုင်းတွင် ဖြစ်သည် (red 0px ကို မရေးလည်း ရသည်) -

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

css#elem {
  background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ . အရွယ်အစားများကို ရာခိုင်နှုန်းဖြင့်လည်း သတ်မှတ်နိုင်သည်

အောက်ပါဥပမာတွင် လုပ်ဆောင်ချက်မှာ အောက်ပါအတိုင်းဖြစ်သည်- အနီရောင်စင်ကြယ်သောအရောင်သည် 0% မှ 30% အထိဖြစ်ပြီး၊ အပြာရောင်စင်ကြယ်သောအရောင်သည် 30% မှ 60% အထိဖြစ်ကာ၊ အစိမ်းရောင်စင်ကြယ်သောအရောင်သည် 60% နောက်ပိုင်းတွင် ဖြစ်သည် (red 0% ကို မရေးလည်း ရသည်) -

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

css#elem {
  background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
  width: 200px;
  height: 200px;
}

Результат:

ဥပမာ . background-size နှင့် ပေါင်းစပ်အသုံးပြုခြင်း

အောက်ပါဥပမာတွင် လုပ်ဆောင်ချက်မှာ အောက်ပါအတိုင်းဖြစ်သည်- အနီရောင်စင်ကြယ်သောအရောင်သည် 0px မှ 30px အထိဖြစ်ပြီး၊ အပြာရောင်စင်ကြယ်သောအရောင်သည် 30px မှ 60px အထိဖြစ်ကာ၊ ၎င်းအားလုံးသည် 60px အပိုင်းလေးများဖြင့် ထပ်ခါထပ်ခါ ပြန်လည်ဖြစ်ပေါ်နေမည် (background-size: 60px; ကြောင့်) -

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

css#elem {
  background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
  background-size: 60px 60px;
  width: 200px;
  height: 200px;
}

Результат:

ဆက်လက်ဖတ်ရှုရန်