🌅CSS ရောင်စဉ်ပြောင်းလဲမှု ဂျင်နရေတာ

linear၊ radial၊ conic အကြား ကွာခြားချက်

CSS ရောင်စဉ်ပြောင်းလဲမှုတွင် အရောင်ပြောင်းလဲပုံ ကွဲပြားသော function သုံးမျိုးရှိပြီး၊ အားလုံးကို background property တွင် ရေးသားအသုံးပြုသည်။

• linear-gradient：linear-gradient သည် သတ်မှတ်ထားသော ထောင့်ဒီဂရီ၏ တည့်မတ်သောမျဉ်းကြောင်းအတိုင်း အရောင်ပြောင်းလဲသွားသော linear ရောင်စဉ်ပြောင်းလဲမှုတစ်ခုဖြစ်သည်။
• radial-gradient：radial-gradient သည် ဗဟိုတည်နေရာမှ အပြင်ဘက်သို့ ဝန်းကျင် သို့မဟုတ် oval ပုံသဏ္ဍာန်ဖြင့် အရောင်ပျံ့နှံ့သွားသော radial ရောင်စဉ်ပြောင်းလဲမှုတစ်ခုဖြစ်သည်။
• conic-gradient：conic-gradient သည် ဗဟိုတည်နေရာ၏ ပတ်လည်ကို နာရီလက်တံအတိုင်း တစ်ပတ်လည်သွားစဉ် အရောင်ပြောင်းလဲသွားသော conic ရောင်စဉ်ပြောင်းလဲမှုတစ်ခုဖြစ်သည်။

ထောင့်ဒီဂရီနှင့် ဦးတည်ရာ keyword များ၏ ဆက်စပ်မှု

linear-gradient ၏ ထောင့်ဒီဂရီသည် 0deg တွင် အောက်မှ အပေါ်သို့ ဦးတည်ပြီး၊ ကိန်းဂဏန်းတိုးလာသည်နှင့်အမျှ နာရီလက်တံအတိုင်း လှည့်သွားသည်။ ထောင့်ဒီဂရီကို 「to right」ကဲ့သို့ ဦးတည်ရာ keyword ဖြင့်လည်း ရေးသားနိုင်ပြီး၊ 90deg သည် 「to right」နှင့်၊ 180deg သည် 「to bottom」နှင့် တူညီသော ဦးတည်ရာဖြစ်သည်။

Color stop နှင့် ပွင့်လင်းမှု ရေးသားနည်း

Color stop ဆိုသည်မှာ ရောင်စဉ်ပြောင်းလဲမှုအတွင်း ထိုအရောင်ဖြစ်လာသော တည်နေရာဖြစ်ပြီး၊ 0% သည် စတင်မှတ်၊ 100% သည် အဆုံးမှတ်ကို ကိုယ်စားပြုသည်။ ဥပမာ 「#3B82F6 0%, #8B5CF6 100%」ဆိုသည်မှာ စတင်မှတ်၏ အပြာရောင်မှ အဆုံးမှတ်၏ ခရမ်းရောင်သို့ အရောင်ပြောင်းလဲသွားသော သတ်မှတ်ချက်ဖြစ်သည်။

• #RRGGBB ပုံစံ：#RRGGBB ပုံစံသည် အနီ၊ အစိမ်း၊ အပြာအား ၂ လုံးစီ hexadecimal ဖြင့် ဖော်ပြသော အရောင်ရေးသားနည်းဖြစ်ပြီး၊ #FF0000 သည် ပွင့်လင်းမှုမရှိသော အနီရောင်ကို ကိုယ်စားပြုသည်။
• rgba ပုံစံ：rgba ပုံစံသည် အနီ၊ အစိမ်း၊ အပြာ တန်ဖိုး (0～255) တွင် ပွင့်လင်းမှု (0～1) ထည့်သွင်းထားသော အရောင်ရေးသားနည်းဖြစ်ပြီး၊ ပွင့်လင်းမှု 0.5 သည် တစ်ဝက်ပွင့်လင်းသော အရောင်ကို ကိုယ်စားပြုသည်။