CSS pilulka / generátor tvarov štadióna
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 posunutými na veľmi veľký polomer: 999 pixelov. Na typickom obdĺžniku s veľkosťou tlačidla prehliadač oreže veľký polomer presne na polovicu výšky poľa, čo vytvára úplne zaoblený tvar pilulky alebo štadióna, a nie štvorec s mierne zaoblenými rohmi.
To je dôvod, prečo tlačidlá piluliek nepotrebujú presnú hodnotu polomeru vyladenú podľa výšky každého tlačidla – každé číslo pohodlne väčšie ako polovica výšky dáva rovnaký orezaný výsledok, čo je tiež dôvod, prečo sa 999 pixelov (alebo dokonca 9999 pixelov) stalo neformálnou skratkou komunity pre „zaokrúhliť toto celé“ v CSS.
Zmeňte veľkosť poľa vo svojom vlastnom rozložení a rovnakých 999 pixlov vytvára plnú pilulku v akejkoľvek výške, pretože prehliadač sa vždy automaticky prichytí na polovicu poľa. Skopírujte CSS, keď bude vyzerať správne, alebo odpojte rohy a vytvorte namiesto toho asymetrickú kapsulu.