CSS border-radius savybės veikimas
CSS border-radius savybė leidžia reguliuoti rėmelio kampų apvalumą. Šis įrankis suteikia galimybę valdyti kiekvieną kampą atskirai arba sujungti juos kartu, pasirenkant pikselių arba procentų vienetus. Taip pat galima naudoti elipsinį režimą, kuris sukuria švelnesnes, organiškesnes formas, suteikdamas kiekvienam kampui atskirus horizontalius ir vertikalius spindulius. Įrankis akimirksniu sugeneruoja atitinkamą CSS kodą jūsų dizainui.
Pradinė šliaužiklio reikšmė yra 24, o tai sugeneruoja kodą border-radius: 24px;. Visi nustatymai atliekami naudojant šiuos valdymo elementus:
- Šliaužikliai: skirti kampų apvalumui reguliuoti. Kai kampai yra sujungti, visi keturi kampai valdomi vienu šliaužikliu, pažymėtu „Visi kampai“. Kai kampai atjungti, pateikiami keturi šliaužikliai: „Viršuje kairėje“, „Viršuje dešinėje“, „Apačioje dešinėje“ ir „Apačioje kairėje“. Elipsiniame režime kiekvienas kampas papildomai turi šliaužiklius „Horizontaliai“ ir „Vertikaliai“. Šliaužiklių diapazonas yra nuo 0 iki 100.
- Vieneto pasirinkimas: leidžia perjungti „px“ (pikselius) ir „%“ (procentus).
- Sujungti visus kampus: jungiklis, skirtas kampų reguliavimui susieti arba atskirti.
- Elipsiniai kampai: jungiklis, skirtas elipsiniam režimui įjungti arba išjungti.
- Išankstiniai nustatymai: mygtukai „Smailus“, „Apvalus“, „Apskritimas“, „Lašelis“ ir „Lapas“.
Gauti rezultatai vizualizuojami peržiūros lange, o sugeneruotas CSS kodas pateikiamas po antrašte „CSS“. Jį galima nukopijuoti naudojant mygtuką „Kopijuoti CSS“.
Pikselių ir procentų skirtumai rėmelio apvalinimui
Pasirinktas matavimo vienetas iš esmės keičia tai, kaip naršyklė apskaičiuoja kampo apvalumą:
| Vienetas | Apvalinimo elgsena | Naudojimo pavyzdys |
|---|---|---|
| Pikseliai (px) | Kampas apvalinamas fiksuotu dydžiu, nepriklausomai nuo elemento matmenų. | Piliulės formos mygtukai, fiksuoto dydžio kortelės. |
| Procentai (%) | Kampas apvalinamas proporcingai rėmeliui: horizontalus procentas seka plotį, o vertikalus – aukštį. | Apskritimai, elipsės, prisitaikantys (responsive) elementai. |
Keturi kampų šliaužikliai pagal laikrodžio rodyklę atitinka viršutinį kairįjį, viršutinį dešinįjį, apatinį dešinįjį ir apatinį kairįjį kampus. Naudojant procentus, nustačius visus kampus ties 50%, kvadratinis elementas virsta tobulu apskritimu.
Elipsinių kampų kūrimas ir CSS sintaksė
Kai elipsinių kampų režimas yra išjungtas, kiekvienas kampas yra ketvirtadalis apskritimo su vienu spinduliu. Įjungus elipsinį režimą, kiekvienas kampas įgyja atskirą horizontalų ir vertikalų spindulį. Tai leidžia sukurti asimetriškus, švelnius ir organiškus „lašelio“ pavidalus.
Šis režimas keičia sugeneruojamo CSS kodo struktūrą. Naršyklėms suprantama sintaksė reikalauja atskirti horizontaliąsias ir vertikaliąsias reikšmes pasviruoju brūkšniu. Generatorius automatiškai rašo dviejų reikšmių formą su pasviruoju brūkšniu, kai elipsinis režimas yra įjungtas, ir grįžta prie trumposios formos, kai kampai vėl tampa apvalūs.
Praktiniai dizaino pavyzdžiai: apskritimai ir piliulės
Naudojant šį įrankį, galima greitai sukonfigūruoti specifines geometrines formas:
- Tobulas apskritimas: norint sukurti apskritimą iš kvadratinio elemento, reikia sujungti kampus, perjungti vienetus į procentus ir nustatyti 50% reikšmę. Tam taip pat galima naudoti išankstinį nustatymą „Apskritimas“, kuris automatiškai nustato visus kampus ties 50%.
- Piliulės formos mygtukas: norint sukurti piliulės formą, reikia palikti pikselių vienetus ir patraukti kampo šliaužiklį toliau nei pusė mygtuko aukščio. Tokiu atveju šonai liks visiškai suapvalinti esant bet kokiam elemento pločiui.
Išankstiniai nustatymai leidžia vienu spustelėjimu pritaikyti paruoštus šablonus, tokius kaip „Smailus“, „Apvalus“, „Apskritimas“, „Lašelis“ ar „Lapas“, kurie iškart pakeičia šliaužiklių pozicijas ir sugeneruoja reikiamą kodą.
Duomenų apdorojimas ir privatumas
Naudojantis šiuo įrankiu, visi skaičiavimai ir vizualizacijos atliekami lokaliai. Kiekvienas kampas braižomas tiesiog jūsų naršyklėje. Jokie jūsų nustatymai ar įvesti parametrai nėra siunčiami į „BroBroGo“ serverius.
Dažniausiai užduodami klausimai (DUK)
Kaip veikia keturi kampai ir kuo skiriasi px bei %?
Keturi šliaužikliai pagal laikrodžio rodyklę atitinka viršutinį kairįjį, viršutinį dešinįjį, apatinį dešinįjį ir apatinį kairįjį kampus. Pasirinkus pikselius, kampas apvalinamas fiksuotu dydžiu; pasirinkus procentus, jis apvalinamas proporcingai rėmeliui – horizontalus procentas skaičiuojamas nuo pločio, o vertikalus – nuo aukščio, todėl 50% paverčia kvadratą apskritimu.
Ką daro elipsinis režimas?
Kai ši funkcija išjungta, kiekvienas kampas yra ketvirtadalis apskritimo su vienu spinduliu. Ją įjungus, kiekvienas kampas įgyja atskirą horizontalų ir vertikalų spindulį – taip kuriami švelnūs, organiški „lašelio“ (angl. blob) pavidalai. Generatorius užrašys dviejų reikšmių formą su pasviruoju brūkšniu, o kampams vėl tapus apvaliems grįš prie trumposios formos.
Kaip sukurti tobulą apskritimą arba piliulės formą?
Sujunkite kampus, perjunkite į procentus ir nustatykite 50%: kvadratas taps apskritimu. Jei norite gauti piliulės formos mygtuką, palikite pikselius ir patraukite kampą daugiau nei per pusę mygtuko aukščio – šonai liks visiškai suapvalinti bet kokiu pločiu. „Apskritimo“ išankstinis nustatymas tai sukonfigūruoja vienu spustelėjimu.