CSS-ում կլորացված անկյունների հայտարարություն ստեղծելու ուղեցույց

Չորս անկյունների արժեքներն ու չափման միավորը մուտքագրելով՝ կարող եք ստանալ CSS-ի border-radius հայտարարություն կլորացված անկյունների համար։ Բաց թողնված անկյան համար կիրառվում է 10, իսկ բաց թողնված միավորի համար՝ px։

Ինչ է պատրաստում գործիքը և երբ է այն օգտակար

Այս գործիքը նախատեսված է այն դեպքերի համար, երբ CSS-ում պետք է պատրաստել border-radius հայտարարություն՝ տարրի անկյունները կլորացնելու նպատակով։ Դուք առանձին նշում եք վերևի ձախ, վերևի աջ, ներքևի աջ և ներքևի ձախ անկյունների արժեքները, ապա ընտրում չափման միավորը։ Ստացված արդյունքը հենց այդ արժեքների հիման վրա կազմված CSS հայտարարությունն է, ոչ թե ամբողջական ոճաթերթ կամ տարրի այլ ոճերի հավաքածու։

Արժեքների հերթականությունը կարևոր է, որովհետև չորս դաշտերը կապված են տարբեր անկյունների հետ։ Նույն թիվը բոլոր դաշտերում գրելու դեպքում ստանում եք հավասար կլորացում, իսկ տարբեր թվերով կարող եք ստեղծել ասիմետրիկ տեսք։ Զրո արժեքը նույնպես կիրառելի մուտք է այն անկյան համար, որը չպետք է կլորացվի։ Եթե որևէ անկյան թիվ չնշեք, դրա համար օգտագործվում է 10 արժեքը, իսկ միավորը չնշելու դեպքում ընտրվում է px։

Այս մոտեցումը հարմար է ինչպես նոր CSS կանոն պատրաստելիս, այնպես էլ արդեն մշակվող ինտերֆեյսի համար արագ տարբերակ փորձարկելիս։ Միաժամանակ հարկավոր է հիշել, որ գործիքը միայն border-radius հայտարարությունն է առաջացնում։ Այն չի կազմում ամբողջական CSS ֆայլ, չի ընտրում դասի անուն և չի նկարագրում տարրի մնացած հատկությունները։

Մուտքագրումից մինչև պատրաստ հայտարարություն

1. Բացեք գործիքի մուտքային վահանակը և գտեք չորս անկյուններին համապատասխան դաշտերը։ Վերևի ձախ դաշտում գրեք առաջին արժեքը, վերևի աջում՝ երկրորդը, ներքևի աջում՝ երրորդը, իսկ ներքևի ձախում՝ չորրորդը։ Այս հերթականությունը պահպանեք նաև այն ժամանակ, երբ բոլոր անկյունների համար տարբեր թվեր եք նախատեսում։

2. Որոշեք, թե ինչ թվեր եք ուզում փոխանցել։ Հավասար կլորացման համար նույն արժեքը գրեք չորս տեղում։ Անկյուններով տարբեր ձև ստանալու համար յուրաքանչյուր դաշտ լրացրեք առանձին թվով։ Եթե մի անկյան համար արժեքը թողնեք բաց, համակարգը այդ դիրքում կիրառում է 10-ը։ Այդ պատճառով բաց դաշտը չի նշանակում, որ տվյալ անկյունը կստանա զրո կլորացում։

3. Ընտրեք կամ գրեք անհրաժեշտ միավորը համապատասխան ընտրիչում։ Եթե միավորը նույնպես բաց թողնեք, արդյունքի մեջ օգտագործվում է px։ Ընտրված միավորի տեքստը կցվում է յուրաքանչյուր անկյան արժեքին, ուստի նույն ընտրությունը տարածվում է չորս արժեքների վրա։ Օրինակ՝ չորս թվերի կողքին rem ընտրելու դեպքում հայտարարության յուրաքանչյուր բաղադրիչի հետևում հայտնվում է rem։

4. Կատարեք գեներացումը և նայեք ստացված CSS հայտարարությանը։ Համեմատեք դրա չորս բաղադրիչները ձեր մուտքի հետ՝ ձախից աջ կարդալով նույն անկյունային հերթականությամբ։ Եթե օգտագործել եք տարբեր արժեքներ, ստուգեք, որ առաջինը վերևի ձախին է վերաբերում, երկրորդը՝ վերևի աջին, երրորդը՝ ներքևի աջին, իսկ չորրորդը՝ ներքևի ձախին։

5. Պատճենեք ստացված հայտարարությունը ձեր CSS-ի համապատասխան տեղում և ինքներդ ավելացրեք այն ընտրիչին կամ կանոնի այն հատվածին, որտեղ պետք է կիրառվի։ Գործիքը չի լրացնում շրջապատող ոճային կառուցվածքը, այնպես որ դասի, ընտրիչի կամ այլ հատկությունների ընտրությունը մնում է ձեր աշխատանքային կոդի համատեքստում։ Եթե նոր փորձ եք անում, փոխեք միայն այն անկյան թիվը կամ միավորը, որի ազդեցությունն եք ուզում համեմատել։

Ինչպես կարդալ ստացված CSS-ը

Արդյունքը պետք է կարդալ որպես border-radius հատկության մեկ CSS հայտարարություն, որի արժեքային մասում անկյունների տվյալները դասավորված են չորս դիրքով։ Միատեսակ մուտքի դեպքում չորս դիրքերը ներկայացնում են նույն չափը, իսկ ասիմետրիկ մուտքի դեպքում յուրաքանչյուր դիրք պահպանում է իր փոխանցված թիվը։ Այդ դասավորությունը թույլ է տալիս տեսնել ոչ միայն թվերը, այլև դրանց կապը անկյունների հետ։

Միավորի ընտրությունը տեսանելի է յուրաքանչյուր բաղադրիչի կողքին, քանի որ տրամադրված միավորի տեքստը կցվում է բոլոր անկյունների արժեքներին։ Ուստի px և rem տարբերակները նույն թվերի համար տալիս են տարբեր գրված հայտարարություններ։ Եթե մուտքում միավորը բացակայում է, արդյունքի համար սպասելի հիմքը px-ն է։ Նույն կերպ, բաց թողնված անկյան դեպքում արդյունքը պետք է մեկնաբանել 10 արժեքի հաշվառմամբ, այլ ոչ թե որպես դատարկ դիրք։

Արժեքները դիտարկեք որպես այն տվյալները, որոնք ցանկանում եք փոխանցել գեներատորին։ Չկա հաստատված հիմք պնդելու, որ գործիքը թվերը կամ միավորները ստուգում, կլորացնում, նորմալացնում կամ սահմանափակում է որոշակի միջակայքով։ Այդ պատճառով վերջնական հայտարարությունը տեղադրելուց առաջ կարդացեք այն և համոզվեք, որ գրված մուտքը համապատասխանում է ձեր CSS-ի նպատակին։ Գեներացման հաջող արդյունքը պարունակում է ստեղծված հայտարարությունը՝ ներառյալ միատեսակ, ասիմետրիկ և զրոյական արժեքներով դեպքերը։

Գործնական օրինակ

Դիզայները քարտի վերևի անկյունները ուզում է ավելի կլորացնել, ներքևի աջը՝ քիչ, իսկ ներքևի ձախը թողնել առանց կլորացման։

Բացեք չորս անկյունների դաշտերը, մուտքագրեք համապատասխանաբար 12, 24, 6 և 0, ընտրեք px, ապա կատարեք գեներացումը։ Ստացված հայտարարության մեջ առաջին արժեքը պետք է վերաբերի վերևի ձախ անկյանը, իսկ վերջինը՝ ներքևի ձախին։

Հաջող արդյունքը պարունակում է մեկ ստեղծված CSS border-radius հայտարարություն, որտեղ չորս արժեքները դասավորված են վերևի ձախ, վերևի աջ, ներքևի աջ և ներքևի ձախ հերթականությամբ, իսկ յուրաքանչյուր թվի կողքին կա ընտրված px միավորը։

Սահմանափակումներ

• Արդյունքը սահմանափակվում է ստեղծված border-radius հայտարարությամբ։ Հայտարարված ցանցային հասանելիությունը false է, սակայն այդ հանգամանքը ինքնին տեղեկություն չի տալիս գործիքի տեղակայման, տվյալների պահպանման, գաղտնիության կամ հաշվի անհրաժեշտության մասին։

Հաճախակի սխալներ

• Եթե արդյունքը չի համապատասխանում ակնկալված անկյուններին, պատճառը հաճախ դաշտերի հերթականությունը շփոթելն է կամ դատարկ դաշտի իմաստը սխալ հասկանալը։ Նորից դասավորեք թվերը վերևի ձախից դեպի ժամացույցի սլաքի ուղղությամբ՝ վերևի աջ, ներքևի աջ, ներքևի ձախ, և հիշեք, որ բաց թողնված արժեքը դառնում է 10, իսկ բաց թողնված միավորը՝ px։

Հաճախ տրվող հարցեր

Կարո՞ղ եմ յուրաքանչյուր անկյան համար տարբեր արժեք տալ։

Այո, չորս դաշտերում կարող եք գրել տարբեր թվեր։ Դրանք արդյունքի մեջ մնում են վերևի ձախ, վերևի աջ, ներքևի աջ և ներքևի ձախ անկյունների նույն հերթականությամբ։

Ի՞նչ է լինում, երբ անկյան արժեքը դատարկ եմ թողնում։

Եթե անկյան դաշտը չլրացնեք, այդ դիրքի համար օգտագործվում է 10 արժեքը։ Այդ վարքը չի նշանակում զրո, ուստի զրոյական անկյուն ստանալու նպատակով մուտքագրեք 0։

Ի՞նչ միավոր է օգտագործվում, եթե ես ոչինչ չընտրեմ։

Միավոր չնշելու դեպքում գեներացված հայտարարության մեջ կիրառվում է px։ Ընտրված միավորը կցվում է բոլոր չորս անկյունների թվերին, քանի որ այն փոխանցվում է յուրաքանչյուր արժեքի հետ։