Boki graniczne w CSS

Granice otaczają element HTML, aby wyróżnić zawartość elementu. Granica ma liczbę stron zgodnie z odpowiednim elementem (zwykle jest to cztery). Strony graniczne w CSS pozwalają reprezentować boki w określonym stylu, takie jak kropkowane, przerywane itp. W tym artykule zawiera przewodnik, aby zapewnić następujące wyniki uczenia się.

• Stylizacja poszczególnych boków granicznych w CSS
• Stylowanie wielu boków granicznych w CSS

Jak stylizować boki graniczne w CSS

Ta sekcja zawiera użycie nieruchomości bocznej granic w kilku scenariuszach.

Jak stylizować jedną stronę graniczną w CSS

W tej sekcji praktykuje nieruchomości o nazwie w stylu granicznym, w stylu granicznym, stylu przybrzeżnym i stylu border.

Border-top-styl: wartość; // do stylowania górnej granicy
Border-Right-Style: Value; // do stylu prawej granicy
Border-Bottom-Style: wartość; // do stylu dolnej granicy
border-left-styl: wartość; // do stylu lewa granica

Wartość powyższych właściwości może być kropkowana, przerywana, solidna, podwójna, rowka itp.,

Kod podany poniżej korzysta z wyżej wymienionych właściwości.

nieruchomość w stylu granicznym

nieruchomość w stylu granicznym

nieruchomość w stylu dna granicznym

nieruchomość w stylu granicznym

Kod wyjaśniono jako,

• Cztery klasy CSS są tworzone o nazwie „Top”, „Right”, „Umor” i „Left”
• Każda klasa jest powiązana z inną właściwością, taką jak „najlepsza” klasa wykorzystuje-stylowy i tak dalej.
• Te klasy CSS są następnie osadzone w czterech różnych akapitach

Wyjście:

Jak ustawić ten sam styl na wszystkie strony graniczne

Musiałbyś wspomnieć tylko o jednym wzorze stylu w stylu granicznym CSS. Dla łatwości napisaliśmy składnię tej konkretnej właściwości stron granicznych:

styl graniczny: wartość;

Poniższy kod ustawia styl każdej strony granicznej solidny.

Witamy w Linuxhint

Obraz kodu jest podany poniżej:

Wyjście:

Jak ustawić ten sam styl na przeciwnych stronach granicznych

Aby to zrobić, poniższa składnia pomogłaby ci.

styl graniczny: wartość1 wartość2;

Wartość1 zmieni styl górnych i dolnych granic, a wartość2 odnosi się do lewego i prawego dna.

Poniższy kod praktykuje tę właściwość stylizacji CSS:

Witamy w Linuxhint

Górne i dolne granice byłyby stylizowane w solidnych.

Obraz kodu znajduje się poniżej:

Wyjście:

Jak stylizować granicę za pomocą trzech wartości

Jeśli liczba wartości wynosi trzy, wówczas wartości 1 i 3.

styl graniczny: wartość1 wartość 2;

Wartość1 dla góry, wartość2 dla dołu i wartości3 dla lewej/prawej styl. Poniższy przykład używa powyższej składni do stylizowania trzech boków granicznych:

Witamy w Linuxhint

Kod stykuje górną, prawą i dolną granice odpowiednio na solidne, kropkowane i przerywane.

Wyjście:

Jak ustawić różne style dla każdej strony granicznej

Poniższa składnia pomaga zmienić styl graniczny każdej strony.

styl graniczny: wartość1 wartość 2 wartość4;

Wartość 1 i wartość3 odnoszą się do górnych i dolnych granic, podczas gdy wartość2 i wartość 4 są dla lewego i prawego dna.

Poniższe kod praktyki w stylu wszystkich stron granicznych w CSS.

Witamy w Linuxhint

Powyższy kod zmienia styl górnej i dolnej na solidne i kropkowane. Jednak prawe i lewe granice zostaną stylizowane odpowiednio i solidne.

Obraz powyższego kodu znajduje się poniżej:

Wyjście:

Wniosek

Elementy w HTML mogą być zamknięte na granicy, a boki graniczne można manipulować za pomocą różnych właściwości CSS. Ten artykuł zawiera demonstrację stron granicznych w CSS. Boki graniczne można przerywane, kropkowane lub solidne. Możesz ustawić ten sam styl dla wszystkich granic, różnych stylów dla wszystkich granic lub ustawić ten sam styl dla górnego/dolnego i prawego/lewego. Aby uzyskać lepsze zrozumienie, przedstawiliśmy również przykłady ilustrujące wyżej scenariusze.