Border radius generatorius

Kaip naudotis border radius generatoriumi

1. Tempk taškus ant peržiūros kraštų. Kiekvienas spalvotas taškas nustato kampo horizontalų spindulį; kai pažymėta Elipsiniai kampai (8 reikšmės), balti taškai nustato vertikalius spindulius.
2. Arba įvesk tikslias reikšmes skiltyje Kampai: Viršuje kairėje, Viršuje dešinėje, Apačioje dešinėje ir Apačioje kairėje, kiekvienam su laukeliais Horizontalus ir Vertikalus.
3. Pasirink Vienetas: % (bloko procentas) arba px (pikseliai). Perjungus esamos reikšmės perskaičiuojamos, todėl forma lieka ta pati.
4. Nustatyk Bloko plotis (px) ir Bloko aukštis (px) pagal savo elementą, o Visi kampai leidžia suapvalinti visus kampus vienu metu.
5. Išbandyk Šablonai (Suapvalintas, Tabletė, Apskritimas, Lapas, Lašas, Kiaušinis, Bilietas ir tris dėmes) arba spustelėk Atsitiktinė dėmė, kad gautum organišką formą.
6. Pažymėk Atskiros savybės, jei nori keturių border-*-radius deklaracijų, tada mygtuku Kopijuoti nukopijuok CSS kodas.

Klaviatūra: pasirink tašką ir spausk rodyklių klavišus, kad pakeistum jo spindulį vienu žingsniu (10 žingsnių su Shift).

Veikia tavo naršyklėje. Nieko, ką įvedi, nesiunčiame į serverį.

border-radius sintaksė

border-radius priima nuo vienos iki keturių reikšmių tokia tvarka: viršuje kairėje, viršuje dešinėje, apačioje dešinėje, apačioje kairėje. Kaip ir su paraštėmis, trūkstamos reikšmės kopijuojamos iš priešingo kampo: border-radius: 10px 20px suapvalina viršutinį kairįjį ir apatinį dešinįjį kampus 10px, o kitus du – 20px. Įrankis visada užrašo trumpiausią lygiavertę formą.

Iš tikrųjų kiekvienas kampas yra elipsės ketvirtis su dviem spinduliais. Pasvirasis brūkšnys atskiria horizontalius spindulius nuo vertikalių, todėl iš viso gali būti iki aštuonių reikšmių:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Prieš brūkšnį: keturių kampų horizontalūs spinduliai. Po jo: vertikalūs spinduliai. Kai abu sąrašai vienodi, dalis po brūkšnio praleidžiama.

Pikseliai ar procentai?

• px suteikia tokį patį lenkimą nepriklausomai nuo elemento dydžio. Tai tinkamas pasirinkimas mygtukams, kortelėms ir įvesties laukeliams: border-radius: 8px.
• % priklauso nuo elemento: horizontalūs spinduliai nuo pločio, vertikalūs nuo aukščio. 50% kvadratą paverčia apskritimu, o stačiakampį – elipse. Būtent procentai leidžia dėmių formoms keisti dydį kartu su elementu.

Tabletės formos mygtukui naudok bent pusės aukščio pikselių spindulį. Šablonas Tabletė tai ir padaro pagal tavo įvestą bloko dydį; tinka ir didelė reikšmė, pavyzdžiui, 999px.

Kai gretimų spindulių suma viršija jų bendrą kraštinę, naršyklės proporcingai sumažina visus spindulius, kol jie telpa. Todėl, nutempus du taškus vieną per kitą, forma nesugenda.

Dėmių formos

Dėmių šablonai ir Atsitiktinė dėmė naudoja aštuonis procentus, kurių dviejų taškų ant kiekvienos kraštinės suma yra 100 %. Tada kreivės susitinka tiksliai ir forma atrodo kaip glotnus akmenukas. Kad gautum „kintančios formos“ efektą, tarp dviejų dėmių pridėk CSS transition savybei border-radius.