CSS Border Radius ဖန်တီးကိရိယာ၏ လုပ်ဆောင်ပုံ
Border Radius ဖန်တီးကိရိယာသည် ဝဘ်ဒီဇိုင်းများတွင် အသုံးပြုမည့် ဘောက်စ်တစ်ခု၏ ထောင့်များကို လိုအပ်သလို လုံးဝန်းစေရန် ကူညီပေးသော ကိရိယာတစ်ခုဖြစ်သည်။ ဤကိရိယာတွင် ထောင့်တစ်ခုစီကို သီးခြားစီ ထိန်းချုပ်နိုင်သလို၊ ထောင့်အားလုံးကို ချိတ်ဆက်၍လည်း တစ်ပြိုင်နက်တည်း ညှိယူနိုင်သည်။ ယူနစ်အနေဖြင့် ပစ်ဇယ် (px) သို့မဟုတ် ရာခိုင်နှုန်း (%) ကို စိတ်ကြိုက်ရွေးချယ်နိုင်သည်။
ထို့အပြင် ပိုမိုပျော့ပျောင်းပြီး သဘာဝကျသော ပုံသဏ္ဌာန်များကို ဖန်တီးရန်အတွက် ဘဲဥပုံထောင့်များ (elliptical mode) ကိုလည်း အသုံးပြုနိုင်သည်။ ဤမုဒ်သည် ထောင့်တစ်ခုစီအတွက် အလျားလိုက်နှင့် ဒေါင်လိုက် အချင်းဝက်များကို သီးခြားစီ သတ်မှတ်ပေးနိုင်သည်။ ကိရိယာကို အသုံးပြု၍ ပြင်ဆင်လိုက်သည်နှင့် တစ်ပြိုင်နက် ဝဘ်ဒီဇိုင်းတွင် တိုက်ရိုက်အသုံးပြုနိုင်မည့် CSS ကုဒ်များကို ချက်ချင်း ထုတ်လုပ်ပေးမည်ဖြစ်သည်။
ထည့်သွင်းအသုံးပြုနိုင်သည့် အစိတ်အပိုင်းများ
ဤကိရိယာတွင် အောက်ပါထိန်းချုပ်မှုများနှင့် အဆင်သင့်ပုံစံများကို အသုံးပြုနိုင်သည်။
- ဆလိုက်ဒါများ (Sliders): ထောင့်များ၏ လုံးဝန်းမှုကို ညှိယူရန် အသုံးပြုသည်။ ဆလိုက်ဒါများ၏ တန်ဖိုးသည် 0 မှ 100 အထိ ရှိသည်။
- ထောင့်အားလုံး ချိတ်ဆက်ရန် ခလုတ်ကို ဖွင့်ထားပါက "ထောင့်အားလုံး" ဟု အညွှန်းတပ်ထားသော ဆလိုက်ဒါတစ်ခုတည်းဖြင့် ထောင့်လေးခုလုံးကို ထိန်းချုပ်နိုင်သည်။
- ထောင့်များကို ဖြုတ်ထားပါက "ဘယ်ဘက်အပေါ်"၊ "ညာဘက်အပေါ်"၊ "ညာဘက်အောက်" နှင့် "ဘယ်ဘက်အောက်" ဟူ၍ ဆလိုက်ဒါ လေးခု ပေါ်လာမည်ဖြစ်သည်။
- ဘဲဥပုံထောင့်များ (elliptical mode) ကို ဖွင့်ထားပါက ထောင့်တစ်ခုစီအတွက် "အလျားလိုက်" နှင့် "ဒေါင်လိုက်" ဆလိုက်ဒါများ ထပ်မံပေါ်လာမည်ဖြစ်သည်။
- ယူနစ်ရွေးချယ်မှု (Unit selector): "px" (ပစ်ဇယ်) နှင့် "%" (ရာခိုင်နှုန်း) အကြား ပြောင်းလဲအသုံးပြုနိုင်သည်။
- ထောင့်အားလုံး ချိတ်ဆက်ရန် ခလုတ် (ထောင့်အားလုံး ချိတ်ဆက်ရန် toggle): ထောင့်အားလုံးကို တစ်ပြိုင်နက်တည်း ညှိရန် သို့မဟုတ် သီးခြားစီ ညှိရန်အတွက် အသုံးပြုသည်။
- ဘဲဥပုံထောင့်များ ခလုတ် (ဘဲဥပုံထောင့်များ toggle): ဘဲဥပုံထောင့်များ စနစ်ကို ဖွင့်ရန် သို့မဟုတ် ပိတ်ရန် အသုံးပြုသည်။
- အဆင်သင့်ပုံစံများ: "ချွန်ထက်သော"၊ "လုံးဝန်းသော"၊ "စက်ဝိုင်း"၊ "Blob ပုံသဏ္ဌာန်" နှင့် "သစ်ရွက်" ဟူသော ခလုတ်များ ပါဝင်သည်။
ရလဒ်ပြသမှုနှင့် ကုဒ်ထုတ်ပေးခြင်း
- Preview: ပြင်ဆင်လိုက်သော border radius တန်ဖိုးများအတိုင်း ဘောက်စ်၏ ပုံသဏ္ဌာန်ပြောင်းလဲသွားပုံကို တိုက်ရိုက်မြင်တွေ့ရမည်ဖြစ်သည်။
- CSS: ထွက်ပေါ်လာသော CSS ကုဒ်များကို "CSS" ခေါင်းစဉ်အောက်တွင် ပြသပေးသည်။
- CSS ကူးယူရန် ခလုတ်: ထုတ်လုပ်ပေးထားသော CSS ကုဒ်များကို လွယ်ကူစွာ ကူးယူနိုင်ရန် "CSS ကူးယူရန်" ဟု ရေးသားထားသော ခလုတ် ပါဝင်သည်။
အသုံးပြုမှု စည်းမျဉ်းများနှင့် အထူးပုံသဏ္ဌာန်များ ဖန်တီးခြင်း
ဆလိုက်ဒါ လေးခုသည် နာရီလက်တံအတိုင်း ဘယ်ဘက်အပေါ်၊ ညာဘက်အပေါ်၊ ညာဘက်အောက်နှင့် ဘယ်ဘက်အောက် ထောင့်များသို့ အသီးသီး ချိတ်ဆက်လုပ်ဆောင်သည်။
ယူနစ်အသုံးပြုပုံနှင့် ပတ်သက်၍ ပစ်ဇယ် (px) ကို ရွေးချယ်ပါက ထောင့်သည် သတ်မှတ်ထားသော ပမာဏအတိုင်း ပုံသေလုံးဝန်းသွားမည်ဖြစ်သည်။ ရာခိုင်နှုန်း (%) ကို ရွေးချယ်ပါက ဘောက်စ်၏ အရွယ်အစားအပေါ် မူတည်၍ လုံးဝန်းသွားမည်ဖြစ်ပြီး အလျားလိုက် ရာခိုင်နှုန်းသည် အကျယ်အပေါ် မူတည်ကာ ဒေါင်လိုက် ရာခိုင်နှုန်းသည် အမြင့်အပေါ် မူတည်သည်။ စတုရန်းပုံစံ ဒြပ်စင်တစ်ခုတွင် ထောင့်အားလုံးကို 50% သတ်မှတ်ပါက ပြီးပြည့်စုံသော စက်ဝိုင်းပုံစံကို ရရှိမည်ဖြစ်သည်။
ဘဲဥပုံထောင့်များ (elliptical mode) ကို ပိတ်ထားပါက ထောင့်တစ်ခုစီသည် အချင်းဝက်တစ်ခုတည်းရှိသော စက်ဝိုင်းလေးပုံတစ်ပုံ ဖြစ်နေမည်ဖြစ်ပြီး၊ ဖွင့်ထားပါက ထောင့်တစ်ခုစီတွင် အလျားလိုက်နှင့် ဒေါင်လိုက် အချင်းဝက် သီးခြားစီ ရှိလာမည်ဖြစ်သည်။ ဤမုဒ်တွင် ဂျင်နရေတာသည် CSS အတွက် တန်ဖိုးနှစ်ခုပါသော slash (/) ပုံစံကို ရေးသားပေးမည်ဖြစ်ပြီး ထောင့်များ ပြန်လည်လုံးဝန်းသွားပါက ပုံစံတိုသို့ အလိုအလျောက် ပြန်ပြောင်းပေးမည်ဖြစ်သည်။
ဆေးတောင့်ပုံစံ (pill-shaped) ခလုတ်တစ်ခု ပြုလုပ်လိုပါက ပစ်ဇယ် (px) ကို ဆက်သုံးပြီး ထောင့်တစ်ခုကို ခလုတ်အမြင့်၏ တစ်ဝက်ကျော်အထိ ဆွဲယူရမည်ဖြစ်သည်။ ထိုသို့ပြုလုပ်ခြင်းဖြင့် မည်သည့်အကျယ်တွင်မဆို ဘေးနှစ်ဖက်သည် အမြဲတမ်း လုံးဝန်းနေမည်ဖြစ်သည်။ ကိရိယာကို စတင်ဖွင့်ချိန်တွင် ကနဦးဆလိုက်ဒါတန်ဖိုးကို 24 အဖြစ် သတ်မှတ်ထားပြီး border-radius: 24px; ဟု ကုဒ်ထုတ်ပေးထားမည်ဖြစ်သည်။
ကိုယ်ရေးအချက်အလက် လုံခြုံမှုနှင့် လုပ်ဆောင်မှုစနစ်
ဤကိရိယာတွင် ထောင့်တစ်ခုစီကို သင့်ဘရောက်ဆာထဲတွင် တိုက်ရိုက်ဆွဲခြင်းဖြစ်သည်။ သင်ပြင်ဆင်သတ်မှတ်သမျှ မည်သည့်အချက်အလက်ကိုမျှ BroBroGo ဆာဗာသို့ တင်ပို့ခြင်း လုံးဝမရှိပါ။
မကြာခဏမေးလေ့ရှိသော မေးခွန်းများ (FAQ)
မေး - ထောင့်လေးခုနှင့် px နှင့် % တို့သည် မည်သို့အလုပ်လုပ်သနည်း။
ဖြေ - ဆလိုက်ဒါ လေးခုသည် နာရီလက်တံအတိုင်း ဘယ်ဘက်အပေါ်၊ ညာဘက်အပေါ်၊ ညာဘက်အောက်နှင့် ဘယ်ဘက်အောက် ထောင့်များသို့ အသီးသီး ချိတ်ဆက်ထားသည်။ ပစ်ဇယ် (px) ဖြင့် သတ်မှတ်ပါက ထောင့်သည် ပုံသေပမာဏအတိုင်း လုံးဝန်းသွားမည်ဖြစ်ပြီး၊ ရာခိုင်နှုန်း (%) ဖြင့် သတ်မှတ်ပါက ဘောက်စ်၏ အရွယ်အစားအပေါ် မူတည်၍ လုံးဝန်းသွားမည်ဖြစ်သည် — အလျားလိုက် ရာခိုင်နှုန်းသည် အကျယ်အပေါ် မူတည်ပြီး ဒေါင်လိုက် ရာခိုင်နှုန်းသည် အမြင့်အပေါ် မူတည်သောကြောင့် 50% သည် စတုရန်းပုံကို စက်ဝိုင်းပုံသို့ ပြောင်းလဲပေးသည်။
မေး - Elliptical မုဒ်က ဘာလုပ်ပေးသလဲ။
ဖြေ - ပိတ်ထားပါက ထောင့်တစ်ခုစီသည် အချင်းဝက်တစ်ခုတည်းရှိသော စက်ဝိုင်းလေးပုံတစ်ပုံ ဖြစ်နေပါမည်။ ၎င်းကို ဖွင့်လိုက်ပါက ထောင့်တစ်ခုစီတွင် အလျားလိုက်နှင့် ဒေါင်လိုက် အချင်းဝက် သီးခြားစီ ရှိလာမည်ဖြစ်ပြီး ၎င်းသည် ပျော့ပျောင်းသော သဘာဝကျသည့် "blob" ပုံသဏ္ဌာန်များကို ဖန်တီးနိုင်သည့် နည်းလမ်းဖြစ်သည်။ ဂျင်နရေတာသည် သင့်အတွက် တန်ဖိုးနှစ်ခုပါသော slash (/) ပုံစံကို ရေးသားပေးမည်ဖြစ်ပြီး ထောင့်များ ပြန်လည်လုံးဝန်းသွားပါက ပုံစံတိုသို့ ပြန်ပြောင်းပေးပါမည်။
မေး - စက်ဝိုင်းပုံ သို့မဟုတ် ဆေးတောင့်ပုံစံကို မည်သို့ပြုလုပ်ရမည်နည်း။
ဖြေ - ထောင့်များကို ချိတ်ဆက်ပြီး ရာခိုင်နှုန်း (%) သို့ပြောင်းကာ 50% ဟု သတ်မှတ်ပါက စတုရန်းပုံသည် စက်ဝိုင်းပုံ ဖြစ်သွားပါမည်။ ဆေးတောင့်ပုံစံ ခလုတ်တစ်ခုအတွက်မူ ပစ်ဇယ် (px) ကိုသာ ဆက်သုံးပြီး ထောင့်တစ်ခုကို ခလုတ်အမြင့်၏ တစ်ဝက်ကျော်အထိ ဆွဲယူပါ — မည်သည့်အကျယ်တွင်မဆို ဘေးနှစ်ဖက်သည် လုံးဝန်းနေမည် ဖြစ်သည်။ စက်ဝိုင်း ကြိုတင်ပြင်ဆင်မှု (Preset) ကို နှိပ်ရုံဖြင့် ပထမနည်းလမ်းအတိုင်း တစ်ချက်တည်းဖြင့် ပြင်ဆင်ပေးပါမည်။