Border-radius ģenerators

Kā lietot border-radius ģeneratoru

1. Velciet punktus uz priekšskatījuma malām. Katrs krāsainais punkts nosaka stūra horizontālo rādiusu; ja ir atzīmēts Eliptiski stūri (8 vērtības), baltie punkti nosaka vertikālos rādiusus.
2. Vai ievadiet precīzas vērtības sadaļā Stūri: Augšējais kreisais, Augšējais labais, Apakšējais labais un Apakšējais kreisais, katram ar lauku Horizontāli un Vertikāli.
3. Izvēlieties Vienība: % (lodziņa procenti) vai px (pikseļi). Pārslēdzot vienību, pašreizējās vērtības tiek pārrēķinātas, tāpēc forma paliek nemainīga.
4. Iestatiet Lodziņa platums (px) un Lodziņa augstums (px) atbilstoši savam elementam un ar Visi stūri noapaļojiet visus stūrus vienlaikus.
5. Izmēģiniet Sagataves (Noapaļots, Kapsula, Aplis, Lapa, Piliens, Ola, Biļete un trīs blobi) vai noklikšķiniet uz Nejaušs blobs, lai iegūtu organisku formu.
6. Atzīmējiet Atsevišķas īpašības, ja vēlaties četras border-*-radius deklarācijas, un ar Kopēt nokopējiet CSS kods.

Tastatūra: fokusējiet punktu un ar bulttaustiņiem mainiet tā rādiusu par vienu soli (ar Shift – par 10).

border-radius sintakse

border-radius pieņem no vienas līdz četrām vērtībām šādā secībā: augšējais kreisais, augšējais labais, apakšējais labais, apakšējais kreisais. Tāpat kā ar atstarpēm, trūkstošās vērtības tiek ņemtas no pretējā stūra: border-radius: 10px 20px noapaļo augšējo kreiso un apakšējo labo stūri par 10px, bet pārējos divus par 20px. Rīks vienmēr raksta īsāko ekvivalento formu.

Katrs stūris patiesībā ir elipses ceturtdaļa ar diviem rādiusiem. Slīpsvītra atdala horizontālos rādiusus no vertikālajiem, tādējādi iegūstot līdz astoņām vērtībām:

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

Pirms slīpsvītras ir četru stūru horizontālie rādiusi, pēc tās – vertikālie. Ja abi saraksti ir vienādi, daļa pēc slīpsvītras tiek izlaista.

Pikseļi vai procenti?

• px dod vienādu liekumu neatkarīgi no elementa izmēra. Tā ir pareizā izvēle pogām, kartītēm un ievades laukiem: border-radius: 8px.
• % ir relatīvs pret elementu: horizontālie rādiusi pret platumu, vertikālie pret augstumu. 50% pārvērš kvadrātu par apli un taisnstūri par elipsi. Tieši procenti ļauj blobu formām mērogoties kopā ar elementu.

Kapsulas formas pogai izmantojiet pikseļu rādiusu, kas ir vismaz puse no augstuma. Sagatave Kapsula to izdara tieši jūsu ievadītajam lodziņa izmēram; derēs arī liela vērtība, piemēram, 999px.

Ja blakus esošie rādiusi kopā pārsniedz kopīgo malu, pārlūkprogrammas visus rādiusus proporcionāli samazina, līdz tie ietilpst. Tāpēc, velkot divus punktus vienu garām otram, forma nesabojājas.

Blobu formas

Blobu sagataves un Nejaušs blobs izmanto astoņus procentus, kur abu punktu summa katrā malā ir 100 %. Tad līknes satiekas precīzi, un forma izskatās kā gluda oļa. Lai iegūtu „pārveidošanās“ efektu, animējiet pāreju starp diviem blobiem ar CSS transition īpašībai border-radius.