CSS Circle Generator — Poloměr okraje 50 %.
Vizuálně navrhněte CSS border-radius: čtyři nezávislé rohové posuvníky v pixelech nebo procentech, zkratka pro okamžité kruhy a pilulky typu link-all-all, plus organický režim blob s náhodnými tvary.
Výsledek
Tato stránka otevře generátor poloměru ohraničení se všemi čtyřmi rohy propojenými a nastavenými na 50 %, což je hodnota, která změní rámeček na kruh pomocí pouze CSS. Upřímně: na čtvercové krabici to tvoří dokonalý kruh, ale na obdélníkové krabici stejných 50 % vytváří elipsu podobnou stadionu, protože každý roh vždy zaokrouhluje svou vlastní čtvrtinu.
Na tomto rozdílu záleží, protože 50% rádius ohraničení je nejběžnějším způsobem vytváření kruhových avatarů, odznaků ikon a stavových bodů v CSS – mnohem jednodušší než oříznutí kruhu maskou nebo jeho nakreslení v SVG a zůstane ostrý při jakékoli velikosti, protože se jedná o relativní procento, nikoli o pevný poloměr pixelů.
Přepněte rámeček na pevnou čtvercovou velikost ve svém vlastním CSS, aby se uzamkl v dokonalém kruhu, nebo jej nechte záměrně obdélníkový pro tvar podobný pilulce – v každém případě zde rohy zůstanou propojené, takže jediný posuvník udržuje všechny čtyři synchronizované, zatímco kopírujete výsledný CSS.