Zaokrąglone granice w CSS
- Jak działa promień graniczny
- Jak zdobyć zaokrąglone granice w CSS
Jak zdobyć zaokrąglone granice w CSS
Zaokrąglone granice są wspierane przez promieniowanie graniczne CSS. Najpierw przyjrzymy się działaniu własności granicznej, a następnie podamy kilka przykładów.
Jak działa Radiusz Border
Nieruchomość graniczna jest właściwością stenograficzną, która składa się z nieruchomości podanych poniżej:
Border-Top-Left-Radius, rand-right-top-right-promień, rand-lewic.
Przede wszystkim działanie promieniowania granicznego zależy od następującej składni:
Border-Radius: wartość;Ponieważ właściwość granicznego Radiusa jest skrótem własnością czterech nieruchomości dzieci. Jeśli chcesz mieć inny promień dla różnych granic, możesz wybrać jedną z następujących możliwości.
okrążyć wszystkie granice o tym samym rozmiarze
Border-Radius: wartość;Okrągłe lewy/prawe dolne i prawe i górne/dolne lewy do tego samego rozmiaru
Border-Radius: Value1 Value2;Okrągłe górne, prawe i prawe dolne granice
Border-Radius: Value1 Value 2 Value3;Jeśli chcesz uzyskać zaokrąglone granice o różnych rozmiarach
Border-Radius: wartość1 wartość 2 wartość 4;Nadchodzące przykłady są praktykowane przy użyciu składni podanej powyżej.
Przykład 1: Zdobycie zaokrąglonych granic
Kod podany poniżej jest wykonywany, aby uzyskać zaokrąglone granice
Witamy w Linuxhint
Valey of Tech
Przewodniki na HTML
Przewodniki na CSS
Kod jest opisany jako,
- Inside Tag, kraje dourowe są nazywane „One”, „Two”, „trzy” i „cztery”
- Klasa „jedna” okrąży wszystkie granice do 20px,
- Klasa „dwóch” okrąży granice górne/dolne i prawe/dolne/dolne do lewej do 25px i 25px.
- „Trzy” rundy klasowe trzy graniczne, lewicowe, górne i prawe dolne
- Klasa dour okrąży wszystkie granice do różnych rozmiarów
- Wewnątrz znacznika deklarowane są cztery akapity, które pokazują użycie czterech klas CSS wymienionych w znaczniku
Obraz kodu jest podany poniżej
Obraz wyjścia na stronie internetowej pokazanej poniżej:
Przykład 2: Zdobądź zaokrągloną granicę wyboru
Powyższy przykład zaokrągla granice w wstępnie zdefiniowanej kolejności. Na przykład, jeśli użyjesz jednej wartości z właściwością promieniowania granicznego, wszystkie granice zostaną zaokrąglone, podobnie, jeśli zostaną zapewnione trzy wartości, lewy dolna granica nie zostanie zaokrąglona.
Powiedzmy, że nie chcemy zaokrąglić z prawej granicy. W takich sytuacjach musisz użyć czterech wartości i użyć 0px zamiast prawej granicy. Do ćwiczenia przyokrąglonej granicy wyboru jest używany następujący kod:
Witamy w Linuxhint
Powyższy kod jest opisany jako:
- Właściwość Border-Radius jest zdefiniowana w znaczniku stylu, w którym 0px jest używany do pominięcia zaokrąglania dolnej granicy
- styl graniczny jest używany w celu lepszej widoczności
- W ciele napisano akapit, na którym używany jest zaokrąglona granica
Obraz edytora kodu jest wyświetlany poniżej:
Wyjście
Po przejściu przez to nauczyłbyś się działania promienia granicznego i związanych z nim właściwości w różnych scenariuszach.
Wniosek
Nieruchomość graniczna Radius ułatwia uzyskiwanie zaokrąglonych granic w CSS. Radiusz graniczny jest właściwością krótkoterminową i zawiera funkcjonalność czterech właściwości. Ten artykuł pokazuje możliwe sposoby uzyskania zaokrąglonych granic w CSS. Aby to zrobić, przedstawiliśmy działanie własności granicznej promieniowania w CSS. Ponadto, dla lepszego zrozumienia, zademonstrowaliśmy również kilka przykładów, aby doprowadzić cię do zaokrąglonych granic w CSS za pomocą właściwości Radiusa.