CSS Circle Generator — Polomer okraja 50 %.
Vizuálne navrhnite polomer okraja CSS: štyri nezávislé rohové posúvače v pixeloch alebo percentách, skratka pre okamžité kruhy a pilulky pre všetky rohy, plus režim organických škvŕn s náhodnými tvarmi.
Výsledok
Táto stránka otvorí generátor polomeru ohraničenia so všetkými štyrmi rohmi prepojenými a nastavenými na 50 %, čo je hodnota, ktorá zmení rámček na kruh pomocou CSS. Úprimne povedané: na štvorcovej krabici to vytvára dokonalý kruh, ale na obdĺžnikovej krabici rovnakých 50 % namiesto toho vytvára elipsu podobnú štadiónu, pretože každý roh zaokrúhľuje iba svoju štvrtinu.
Na tomto rozdiele záleží, pretože polomer okraja 50 % je najbežnejším spôsobom vytvárania kruhových avatarov, odznakov ikon a stavových bodiek v CSS – oveľa jednoduchšie ako orezanie kruhu maskou alebo nakreslenie kruhu vo formáte SVG a pri akejkoľvek veľkosti zostane ostrý, pretože ide o relatívne percento, nie o pevný polomer pixelov.
Prepnite rámček na pevnú štvorcovú veľkosť vo svojom vlastnom CSS, aby ste uzamkli dokonalý kruh, alebo ho nechajte zámerne obdĺžnikový pre tvar podobný pilulke – v každom prípade tu rohy zostanú spojené, takže jeden posúvač udržuje všetky štyri synchronizované, kým kopírujete výsledný CSS.