Generator CSS border-radius

Czym jest Generator CSS border-radius?

Generator CSS border-radius to darmowy wizualny edytor właściwości CSS border-radius, stworzony dla front-end deweloperów i projektantów. Użyj suwaków zakresu i pól liczbowych, aby ustawić poziomy i pionowy promień każdego narożnika w pikselach, wybierz jednostkę i włącz tryb eliptyczny, aby uzyskać składnię z ukośnikiem dla owalnych narożników. Pole podglądu na żywo pokazuje zaokrągloną formę w czasie rzeczywistym, a zwięzła skrócona deklaracja jest generowana do skopiowania. Wybierz predefiniowane ustawienie, takie jak Zaokrąglony, Pigułka, Koło lub organiczny Blob z kontrolki segmentowej, aby szybko zacząć, a następnie dopracuj dowolny narożnik. Używaj go do projektowania miękkich kart, przycisków typu pigułka, idealnych kół, squircle'i i kroplowatych form dekoracyjnych bez zapamiętywania kolejności narożników.

Jak używać Generator CSS border-radius

1. Wybierz predefiniowane ustawienie (Zaokrąglony, Pigułka, Koło lub Blob) z kontrolki segmentowej, aby wczytać kształt początkowy.
2. Przeciągnij suwak zakresu każdego narożnika lub wpisz liczbę, aby ustawić jego promień poziomy.
3. Włącz Eliptyczny, aby wyświetlić drugi pionowy promień na narożnik i utworzyć owalne narożniki ze składnią z ukośnikiem.
4. Wybierz jednostkę (px lub %) w ustawieniach; procenty skalują promień wraz z rozmiarem pudełka.
5. Obserwuj aktualizację podglądu na żywo, a następnie skopiuj wygenerowany skrócony border-radius do arkusza stylów.

Przykłady

Wszystkie cztery narożniki 16, eliptyczny wyłączony

border-radius: 16px;

Ustawienie Pigułka, wszystkie narożniki 9999

border-radius: 9999px;

LG 40/20, PG 10, PD 40/20, LD 10, eliptyczny włączony

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

Najczęściej zadawane pytania

W jakiej kolejności są cztery narożniki?

Skrócony zapis wymienia narożniki zgodnie z ruchem wskazówek zegara, zaczynając od lewego górnego: lewy górny, prawy górny, prawy dolny, lewy dolny. To narzędzie zawsze wypisuje wszystkie cztery wartości w tej kolejności, więc wynik jest jednoznaczny i łatwy do ręcznego dostrojenia później.

Co robi tryb eliptyczny?

Border-radius może przyjmować poziomy i pionowy promień na narożnik, oddzielone ukośnikiem, aby rysować owalne (eliptyczne) zamiast okrągłych narożników. Włącz Eliptyczny, aby ustawić drugi pionowy promień dla każdego narożnika; wynik używa wtedy składni z ukośnikiem 'poziomy / pionowy'.

Czy powinienem używać px czy procentów?

Piksele dają stały rozmiar narożnika niezależnie od pudełka. Procenty są względne wobec szerokości i wysokości pudełka, więc 50% na każdym narożniku zmienia kwadrat w idealne koło, a zaokrąglenie skaluje się wraz ze zmianą rozmiaru elementu. Zmień jednostkę w ustawieniach.

Jak zrobić idealne koło lub pigułkę?

Wybierz ustawienie Koło (50% na każdym narożniku) dla koła z kwadratu lub ustawienie Pigułka (bardzo duży promień w pikselach), aby krótkie boki stały się pełnymi półkolami. Możesz też zacząć od ustawienia i dopracować poszczególne narożniki.

Czy moje dane są gdzieś przesyłane?

Nie. Generator działa w całości w Twojej przeglądarce z JavaScript — Twoje wartości promienia nigdy nie są wysyłane na serwer, więc działa prywatnie, a nawet offline po wczytaniu strony.