CSS အစိတ်

အရောင်သွားလွှဲမှု နောက်ခံ အရောင်

CSS အဆင်းလိုက်ခြင်း သည် သင် အရောင် ၂ ခု သို့မဟုတ် အရောင် ၂ ခု ထက် ပိုသည် အကြား အဆင်းလိုက်ခြင်း အသားကောင်းသော ဆက်လက်လာခြင်း ပြုပါသည်。

CSS အဆင်းလိုက်ခြင်း အမျိုးအစား ၂ မျိုး ကို အသုံးပြုသည်:

  • အဆင်းလိုက်ခြင်း（အောက်ထဲ/အထိပ်ထဲ/အရှေ့ထဲ/အနောက်ထဲ/အစီအစဉ်）
  • အစီအစဉ် အဆင်းလိုက်ခြင်း（သူ၏ အရှိန်အရှည် အချက်အလက် ဖြင့် အသုံးပြုသည်）

CSS အဆင်းလိုက်ခြင်း

အဆင်းလိုက်ခြင်း ဖန်တီးရန် သင်သည် အရောင်အချက် ၂ ခု အထူးသတ်မှတ်ပါသည်။ အရောင်အချက် သည် သင် လွတ်လပ်သော အဆင်းလိုက်ခြင်း အရောင် ဖြစ်သည်။ သင် စတင်ချိန် နှင့် လိုင်းချိန် (သို့မဟုတ် အချိန်အလျှောက်) နှင့် အဆင်းလိုက်ခြင်း အကျိုးသက်ရောက်ခြင်း ကို စစ်ဆေးပါ။

ပုံစံ

background-image: linear-gradient(လိုင်းချိန်, color-stop1, color-stop2, ...);

အဆင်းလိုက်ခြင်း - အထိပ်မှ အောက်ထဲ (မျိုးစဉ်)

အထိပ်မှ စတင်သော အဆင်းလိုက်ခြင်း ပြသထားသည်။ အပိုင်းအဝါ မှ အရောင်သစ် သို့ ဆက်လက်လာသည်:

从上到下（默认）

实例

#grad {
  background-image: linear-gradient(red, yellow);
}

亲自试一试

线性渐变 - 从左到右

下面的例子展示了从左开始的线性渐变。它从红色开始，过渡到黄色：

从左到右

实例

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

亲自试一试

线性渐变 - 对角线

您可以通过指定水平和垂直起始位置来实现对角渐变。

အရှေ့အထက် မှ အောက်ဘက်အနောက် စတင် အရောင်သွားလွှဲမှု ကို ပြသထားသည်။ အရောင်သွားလွှဲမှု အစိတ်အပိုင်း မှ အရောင် အစိတ်အပိုင်း အတိုင်း အရောင် မှ အရောင် သို့ ကူးကြော်ငြားသည်။

အရှေ့အထက် မှ အောက်ဘက်အနောက်

实例

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

亲自试一试

အားလျှော့ အသုံးပြုခြင်း

အရောင်သွားလွှဲမှု အား ပို၍ အပြုအမူ ပြုလုပ်ရန် ကျွန်တော်တို့ အားလျှော့ အား အသုံးပြုပါ၏။ အဆိုပါ အားလျှော့ အား အချက်အလက် ကို အသုံးပြုပါ၏ (အောက်မှ အထက်, အရှေ့မှ အနောက်, အရှေ့ဘက် မှ အနောက်ဘက် အပြီးတွင် နှင့်အတူ)။ 0deg အား အထက် (to top) အဖြစ် အသုံးပြုပါ၏။ 90deg အား အနောက် (to right) အဖြစ် အသုံးပြုပါ၏။ 180deg အား အောက် (to bottom) အဖြစ် အသုံးပြုပါ၏。

180deg

ပုံစံ

background-image: linear-gradient(angle, color-stop1, color-stop2);

အားလျှော့ အား အရောင်သွားလွှဲမှု အစိတ်အပိုင်း နှင့် အဆိုပါ အရောင်သွားလွှဲမှု အစိတ်အပိုင်း အကြား အခြေခံ အဆိုအရင်း အချိန် အကြား ကို အသုံးပြုပါ၏。

အရောင်သွားလွှဲမှု အား အာဏာပေးသော အားလျှော့

实例

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

亲自试一试

အရောင်သွားလွှဲမှု အရောင် အများစု အသုံးပြုခြင်း

အရောင်သွားလွှဲမှု အရောင် အများစု ပါဝင်သော အရောင်သွားလွှဲမှု အကျိုးသမီး အပြုအမူ ကို ပြသထားသည်။ (အထက်ဘက် မှ အောက်ဘက်)။

实例

#grad {
  background-image: linear-gradient(red, yellow, green);
}

亲自试一试

အရောင်သွားလွှဲမှု အရောင် နှင့် အသုံးပြုသော စကားလုံး အား အရောင်သွားလွှဲမှု အကျိုးသမီး အပြုအမူ ကို ပြသထားသည်။ (အရှေ့ဘက်မှ အနောက်ဘက်)။

အရောင်သွားလွှဲမှု နောက်ခံ အရောင်

实例

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

亲自试一试

အလွန်အမြင့် အသုံးပြုခြင်း

CSS အရောင်သွားလွှဲမှု လည်း အလွန်အမြင့် ကို ထောက်ပံ့ပြီး အရောင်သွားလွှဲမှု အကျိုးသမီး ဖန်တီးရန် အသုံးပြုပါ၏。

အလွန်အမြင့်ကို ထပ်ပေးရန် ကျွန်တော်တို့ rgba() လိုင်းစား အသုံးပြုပါ၏။ rgba() လိုင်းစား အစားထိုးသည် 0 မှ 1 အထိ အတိုင်း ဖြစ်ပါ၏။ 0 အမှတ် အကြောင်း အလွန်အမြင့် ဖြစ်ပါ၏။ 1 အမှတ် အကြောင်း အလွန်အမြင့် မရှိ ဖြစ်ပါ၏ (အရောင် အရှိုးသော)。

下面的例子展示了从左开始的线性渐变。它开始完全透明，然后过渡为全色红色：

实例

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

亲自试一试

重复线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

实例

重复的线性渐变：

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

亲自试一试