CSS apļa ģenerators — 50% robežas rādiuss
Vizuāli noformējiet CSS apmales rādiusu: četri neatkarīgi stūra slīdņi pikseļos vai procentos, saīsne uz visiem stūriem tūlītējiem apļiem un tabletēm, kā arī organiskais lāses režīms ar nejaušām formām.
Rezultāts
Šajā lapā tiek atvērts apmales rādiusa ģenerators, kurā visi četri stūri ir saistīti un iestatīti uz 50%, kas pārvērš lodziņu par apli, izmantojot tikai CSS. Godīgi sakot: uz kvadrātveida kastes tas veido perfektu apli, bet taisnstūrveida kastē tie paši 50% tā vietā rada stadionam līdzīgu elipsi, jo katrs stūris vienmēr noapaļo tikai savu ceturtdaļu.
Šai atšķirībai ir nozīme, jo 50% apmales rādiuss ir vienīgais visizplatītākais veids, kā izveidot apļveida iemiesojumus, ikonu nozīmītes un statusa punktus CSS — tas ir daudz vienkāršāk nekā apļa apgriešana ar masku vai apļa uzzīmēšana SVG formātā, un tas paliek izteiksmīgs jebkurā izmērā, jo tas ir relatīvs procents, nevis fiksēts pikseļu rādiuss.
Pārslēdziet lodziņu uz fiksētu kvadrāta izmēru savā CSS, lai fiksētu ideālo apli, vai atstājiet to taisnstūrveida formā, lai iegūtu tabletei līdzīgu formu — jebkurā gadījumā stūri šeit paliek saistīti, tāpēc viens slīdnis sinhronizē visus četrus, kamēr kopējat iegūto CSS.