Border Radius Generator
Generate border radius
Generate border radius Działa lokalnie w Twojej przeglądarce
border-radius: 12px;
About the
Generator promienia obramowania ustawia cztery rogi pudełka niezależnie, z podglądem na żywo i udostępnia CSS. Kolejność skrótów jest tym, o czym wszyscy zapominają: jest to lewy górny róg, prawy górny róg, prawy dolny róg, lewy dolny dół, począwszy od lewego górnego rogu zgodnie z ruchem wskazówek zegara. Jedna wartość dotyczy wszystkich czterech rogów, dwie wartości dotyczą par przekątnych, a cztery wartości odnoszą się kolejno do każdego narożnika. Kiedy wszystkie cztery pasują, narzędzie generuje formularz jednowartościowy, czyli ten, którego faktycznie potrzebujesz przez większość czasu.
Where people use the
- Dopasowanie promienia do specyfikacji projektu bez zgadywania wartości pikseli.
- Zaokrąglanie tylko górnych rogów karty lub modalu.
- Kształtowanie guzika pigułkowego, którego promień stanowi połowę wysokości elementu.
- Znalezienie promienia, który zamienia kwadratowy awatar w okrąg.
How to use the
- 1
Przeciągnij suwak narożny
Każdy róg ma swój własny suwak od 0 do 150 pikseli. Okno podglądu zaokrągla się w miarę jego przesuwania.
- 2
Zachowaj rogi połączone lub rozłącz je
Gdy łącze jest włączone, przesunięcie dowolnego suwaka przesuwa wszystkie cztery razem. Wyłącz tę opcję, aby kształtować poszczególne rogi, czyli jak utworzyć ogon dymka lub kształt liścia.
- 3
Przeczytaj CSS
Jeśli wszystkie cztery pasują, otrzymasz skrót o pojedynczej wartości. Jeśli się różnią, otrzymasz pełny formularz czterowartościowy w kolejności zgodnej z ruchem wskazówek zegara.
- 4
Zamiast tego rozważ procent
Promień 50 procent kwadratowego elementu daje okrąg. Zamień jednostkę px na wartość procentową w arkuszu stylów, jeśli tego właśnie potrzebujesz.
Wskazówki i najlepsze praktyki
- Użyj wartości procentowych, gdy rozmiar elementu się zmienia, pikseli, gdy się nie zmienia.
- Przycisk pigułki nie ma stałego promienia; to połowa wysokości, więc 9999 pikseli to leniwa, ale solidna odpowiedź.
- Zachowaj spójność promienia w zestawie komponentów; mieszanie 4px, 6px i 8px wygląda na przypadkowe.
Często zadawane pytania
W jakiej kolejności są te cztery wartości?
Zgodnie z ruchem wskazówek zegara, od lewego górnego rogu: lewy górny, prawy górny, prawy dolny, lewy dolny róg. Przydatnym mnemonikiem jest to, że zaczyna się w miejscu, w którym zaczynasz czytać i krąży jak tarcza zegara.
Co oznaczają dwie lub trzy wartości?
Dwie wartości wyznaczają przekątne: pierwsza to lewy górny i prawy dolny róg, druga to prawy górny i lewy dolny róg. Trzy wartości ustawione w lewym górnym rogu, następnie w prawym górnym rogu i lewym dolnym rogu razem, a następnie w prawym dolnym rogu.
Jak zrobić okrąg?
Użyj 50 procent na elemencie, który jest już kwadratowy. Użycie pikseli daje okrąg tylko wtedy, gdy promień jest równy połowie szerokości, co przerywa moment zmiany rozmiaru elementu.
Czy mogę zaokrąglać rogi inaczej w poziomie i w pionie?
Pełna składnia pozwala na zapisanie promienia eliptycznego jako wartości poziomych, ukośnika, a następnie wartości pionowych. To narzędzie emituje prostszą, jednolitą formę, więc jeśli potrzebujesz tego kształtu, dodaj wersję z ukośnikiem ręcznie.
Dlaczego mój zaokrąglony róg jest obcięty?
Ponieważ treść podrzędna nie jest przycięta do zaokrąglonego prostokąta. Dodaj ukryte przepełnienie do elementu, w przeciwnym razie obraz lub tło w jego wnętrzu nadal będzie miało kwadratowe rogi.