CSS pilulka / generátor tvarů stadionu
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 posunutými na velmi velký poloměr: 999 pixelů. Na typickém obdélníku o velikosti tlačítka prohlížeč ořízne tento velký poloměr přesně na polovinu výšky pole, což vytváří zcela zaoblený tvar pilulky nebo stadionu spíše než čtverec s mírně zaoblenými rohy.
To je důvod, proč tlačítka pilulky nepotřebují přesnou hodnotu poloměru naladěnou na výšku každého tlačítka – jakékoli číslo pohodlně větší než polovina výšky dává identický oříznutý výsledek, což je také důvod, proč se 999 pixelů (nebo dokonce 9999 pixelů) stalo neformální komunitní zkratkou pro „zaokrouhlit to celou cestu“ v CSS.
Změňte velikost pole ve svém vlastním rozvržení a stejných 999 pixelů bude vytvářet plnou pilulku v jakékoli výšce, protože prohlížeč se vždy automaticky ořízne na polovinu pole. Zkopírujte CSS, jakmile bude vypadat správně, nebo zrušte propojení rohů a vytvořte místo toho asymetrickou kapsli.