0

Generator promienia granicy

Wizualnie zaprojektuj promień obramowania CSS: cztery niezależne suwaki narożne w pikselach lub procentach, skrót łączący wszystkie rogi do natychmiastowych okręgów i pigułek, a także tryb organicznego obiektu typu blob z losowymi kształtami.

12px
12px
12px
12px
Przetwarzanie... 0%

Wynik

Deklaracja promienia obramowania może przyjmować maksymalnie cztery niezależne wartości narożników oraz opcjonalną składnię ukośnika o ośmiu wartościach dla krzywych organicznych — więcej ruchomych części, niż większość ludzi zdaje sobie sprawę, dopóki nie potrzebują czegoś więcej niż zwykłej zaokrąglonej karty. Ten generator wyświetla każdą z tych części na ekranie: cztery narożne suwaki z własną jednostką w pikselach lub procentach, skrót łączący wszystkie rogi dla kształtów symetrycznych oraz tryb blob dla kształtów, których nie można wyrazić pojedynczą wartością promienia.

Tryb narożników obejmuje kształty, po które ludzie faktycznie sięgają: połącz każdy róg z jednym suwakiem, aby uzyskać idealne okręgi, pigułki i wiry, lub rozłącz je, aby zaokrąglić tylko górę rozwijanego panelu lub tylko jedną stronę karty. Podgląd szachownicy za kształtem, z możliwością przełączania między jasnym i ciemnym tłem, sprawia, że ​​jasne jest, które rogi zostaną obcięte w dowolnym promieniu — te same narzędzia plików trików wizualnych na tej stronie służą do pokazywania przezroczystości.

Tryb Blob to druga połowa: składnia CSS z ośmiowartościowym ukośnikiem pozwala, aby promienie poziome i pionowe każdego narożnika nie zgadzały się, co powoduje, że zaokrąglony prostokąt staje się organicznym, nieregularnym konturem. W dowolnym momencie naciśnij opcję Losuj, aby uzyskać nowy kształt i skopiuj dokładnie kod CSS, który się za nim kryje — bez konieczności eksportowania SVG ani zewnętrznej biblioteki. Gotowe strony obejmują żądania, które ludzie faktycznie wpisują w polu wyszukiwania: idealne koło, przycisk pigułki w kształcie stadionu, zawiłość w stylu iOS i gotowa organiczna kropelka.

Jak każde narzędzie na tej stronie, działa ono całkowicie w przeglądarce: bez przesyłania, bez konta, a generator działa w trybie offline po załadowaniu strony.