Promień zaokrąglenia

Narzędzie Promień zaokrąglenia przydaje się projektantom i programistom front-end, gdy chcą dopracować interfejs przed wdrożeniem. Ustaw osobno promień zaokrąglenia każdego z czterech narożników.

Ustaw osobno promień zaokrąglenia każdego z czterech narożników. Narzędzie jest bezpłatne w przeglądarce i pokazuje wynik bez konieczności tworzenia konta.

Jak używać

Wprowadź wartość promienia dla lewego górnego narożnika, a następnie pozostałe trzy narożniki w podanej kolejności.
Użyj jednostki takiej jak px, em lub procent i zachowaj tę samą jednostkę dla wszystkich czterech narożników.
Kliknij przycisk generowania, aby utworzyć pasującą regułę CSS border-radius.
Odczytaj wynik, który łączy cztery wartości, i skopiuj go do swojego arkusza stylów.
Przetestuj wyświetlanie na przykładowym elemencie, zanim dodasz go do swojej strony.

Przykład

Przykładowe dane wejściowe używają czterech różnych wartości narożników. Po wygenerowaniu wynik pokazuje odpowiednią właściwość border-radius. Możesz porównać ten wynik z własnymi wartościami, aby potwierdzić kolejność narożników przed wklejeniem go do kodu.

Ograniczenia i formaty

Narzędzie nie rysuje prostokąta na ekranie; tworzy tylko regułę CSS do skopiowania.
Wartości muszą być liczbowe i zerowe lub dodatnie; wartości ujemne nie są akceptowane przez właściwość CSS.
Mieszanie jednostek może spowodować, że przeglądarka zignoruje wynik.
Zawsze sprawdzaj końcowe wyświetlanie na swojej stronie, ponieważ kontekst elementu może wpływać na efekt wizualny.

Gdzie odbywa się przetwarzanie

Wszystko działa w Twojej przeglądarce. Wprowadzone wartości nigdy nie są przesyłane ani przechowywane. Obliczanie i formatowanie reguły CSS odbywa się lokalnie, bez komunikacji zewnętrznej.

Częste pytania

W jakiej kolejności należy wprowadzić cztery wartości?

Oczekiwana kolejność to lewy górny, prawy górny, prawy dolny, lewy dolny. Jest to standardowa kolejność dla właściwości border-radius. Jeśli zamienisz dwie wartości, wyświetlanie będzie inne. Sprawdź wyświetlony wynik, aby to potwierdzić.

Czy mogę używać procentów?

Tak, procenty są akceptowane. Tworzą zaokrąglone narożniki proporcjonalne do rozmiaru elementu. Zachowaj tę samą jednostkę dla wszystkich czterech narożników, aby uniknąć niespójnego wyniku.

Czy wynik jest gotowy do wklejenia do mojego pliku CSS?

Tak, wynik jest kompletną właściwością CSS. Możesz go skopiować i wkleić do arkusza stylów. Upewnij się tylko, że nie jest nadpisywany przez inną regułę.

Czy mogę mieszać różne jednostki dla czterech narożników?

Mieszanie jednostek może spowodować, że przeglądarka zignoruje wynik. Aby uniknąć problemów, używaj tego samego typu jednostki dla wszystkich czterech narożników, na przykład px, em albo procentów. Wartości muszą być liczbowe i równe zero lub większe, ponieważ właściwość CSS nie akceptuje wartości ujemnych. Po wygenerowaniu reguły przetestuj ją na przykładowym elemencie, zanim dodasz ją do strony.

Czy narzędzie pokazuje podgląd zaokrąglenia na ekranie?

Nie, narzędzie nie rysuje prostokąta na ekranie. Tworzy jedynie odpowiednią regułę CSS do skopiowania. Wartości są obliczane i formatowane lokalnie w przeglądarce, a wpisane dane nie są wysyłane ani przechowywane. Aby zobaczyć efekt, wklej wynik do swojego arkusza stylów i sprawdź renderowanie na przykładowym elemencie. Pamiętaj, że kontekst elementu może wpływać na wygląd końcowy.