Ostatnia aktualizacja 22 lutego, 2024
W tym artykule przyjrzymy się, jak wykorzystać właściwość border-radius, która pozwala na zaokrąglenie rogów w CSS. Jest to jedna z właściwości, która może przydać się do modyfikowania stylu elementów na stronie, w szczególności przycisków na landing page’ach lub wszędzie tam, gdzie decydujemy się korzystać z nich na stronie głównej. Poniżej podajemy przykłady kodu wraz z wyjaśnieniem.
Podstawy border-radius
Właściwość border-radius w CSS służy do zaokrąglania rogów elementów HTML. Można ją zastosować do dowolnego elementu, takiego jak przyciski, kontenery, zdjęcia, itp. Podstawowa składnia wygląda następująco:
element {
border-radius: 10px;
}Wartość 10px określa, jak bardzo zaokrąglone będą rogi elementu. Możesz również użyć innych jednostek, takich jak em, %, vw dla różnych efektów i responsywności.
Zaawansowane zastosowania
Zaokrąglenie rogów w CSS a różne wartości
Możesz określić różne wartości border-radius dla każdego rogu, używając do tego celu czterech wartości oddzielonych spacją:
element {
border-radius: 10px 20px 30px 40px;
}Każda wartość odpowiada kolejno zaokrągleniu: lewego górnego rogu, prawego górnego, prawego dolnego, i lewego dolnego.
Elipsy i okręgi
Zaokrąglenie można także dostosować, tworząc eliptyczne lub okrągłe kształty, stosując dwie wartości rozdzielone ukośnikiem (/):
element {
border-radius: 50% / 10%;
}To pozwala na bardziej złożone kształty, w których pierwsza wartość określa zaokrąglenie poziome, a druga pionowe.
Półokrągłe kształty
Aby stworzyć element w kształcie półkola, możesz wykorzystać border-radius w połączeniu z ograniczeniami wymiarów elementu:
element {
width: 100px;
height: 50px;
border-radius: 50px / 25px;
}W tym przypadku, szerokość elementu wynosi 100px, a jego wysokość 50px, co przy zaokrągleniu 50px / 25px tworzy idealne półokrągłe kształty.
Zaokrąglenie rogów w CSS – najlepsze praktyki
Użycie procentów dla responsywności
Użycie procentów zamiast wartości stałych (np. pikseli) może pomóc w utrzymaniu kształtów elementów responsywnych i proporcjonalnych niezależnie od rozmiaru ekranu:
element {
border-radius: 10%;
}Dalsza część tekstu znajduje się pod materiałem wideo:
Na co warto uważać w stosowaniu zaokrąglenia rogów w CSS?
Podczas gdy zaokrąglone rogi mogą znacząco poprawić estetykę strony, nadmierne ich stosowanie lub zbyt duże wartości mogą prowadzić do niepożądanych efektów wizualnych. Zaleca się umiar i testowanie różnych wartości, aby znaleźć optymalne rozwiązanie.
Choć większość nowoczesnych przeglądarek wspiera border-radius bez potrzeby stosowania prefiksów, warto upewnić się, że Twoje strony są przetestowane i poprawnie wyświetlane w różnych środowiskach.
Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.
Czytaj także:
