Zarys obrysu CSS

Być może usłyszałeś i użyłeś właściwości granicznej w stylizacji CSS podczas przygotowywania plików HTML do utworzenia podświetlonej granicy wokół niektórych elementów wokół nagłówków, tabel i akapitów. Po dodaniu granicy do dowolnego elementu możesz stylizować ją na różne sposoby: Utwórz stałą, kropkowaną i przerywaną granicę lub zarysować. Obiekt Radiusza Border-Radius umożliwia stylizowanie zakątków granicy. W ramach tego przewodnika będziemy omawiać różne przykłady, aby stylizować narożniki graniczne za pomocą zarysu i właściwości promieniowania granicznego.

Przykład 01:

Zacznijmy od najbardziej podstawowego przykładu granic. W tym przykładzie będziemy pokazać użycie właściwości granicznej do utworzenia prostej granicy wokół elementu używanego w kodzie HTML. Kod HTML został uruchomiony od tagu „HTML” Doctype, który zostanie zamknięty na końcu programu HTML. Po znaczniku HTML używamy znacznika „głowy” i znacznika ciała. Tag „główny” będzie wykorzystywać tag stylu do zaprojektowania naszej strony internetowej.

W obrębie znacznika ciała używamy nagłówku „H1”, który będzie największy rozmiar w nagłówkach HTML. Ten nagłówek zawiera tylko dwa słowa, „promień graniczny”. W tagie stylu wykorzystujemy H1, aby trochę go stylizować. W kręconych nawiasach używamy „granicy” nieruchomości do stworzenia granicy wokół nagłówka. Określiliśmy szerokość obramowania jako 3 piksele stałe i będzie ona czerwona. Styl i metka są tutaj zamknięte. Zapiszmy i uruchommy ten skrypt HTML w kodzie Visual Studio i otworzyj go w Google Chrome.

Po wykonaniu kodu HTML w kodzie Visual Studio, strona internetowa HTML została otwarta w przeglądarce Chrome. Ta strona została wyświetlona z nagłówkiem 1 „Status graniczny” z czerwoną granicą. Ta granica ma szerokość 3 pikseli i jest stała czerwona.

Dopóki jeszcze nie omówiliśmy promienia granicznego w naszej powyższej ilustracji kodu HTML. Tak więc używamy w sumie 4 nagłówków z różnymi tytułami. Ponieważ wszystkie nagłówki są nagłówkami rozmiaru 1, musimy je odróżnić za pomocą klas. Określaliśmy osobne nazwy klas zarówno dla nagłówków, „A”, „B”, „C” i „D”. W stylu znacznika znacznika główne klasy są zdefiniowane w celu osobnego stylizowania obu nagłówków. Chociaż dość podobnie stylizowaliśmy oba nagłówki, konieczne jest osobno to zrobić i nie mieszać. Tworzyliśmy granicę wokół pierwszego nagłówka z solidnym czerwonym kolorem i będzie ona szerokości 3 pikseli.

Ta sama nieruchomość „graniczna” została użyta do pozostałych trzech nagłówków zawierających klasy „B”, „C” i „D”. Jedyną zmianą jest solidny niebieski kolor, solidny zielony kolor i solidny kolor orchidei zamiast czerwonego koloru przez resztę nagłówków. Po dodaniu 3 -pikselowej granicy wokół wszystkich nagłówków, nadszedł czas, aby dodać promień do granicy. Używamy właściwości Radiusza Border, aby dodać granicę 25 pikseli do nagłówka 1. Ta pojedyncza wartość dla właściwości promieniowania granicznego byłaby rozmazana na wszystkich 4 zakątkach granicy.

Następnie używamy dwóch wartości dla nieruchomości „promieniowanie granicy”. Zastosowaliśmy te wartości do kierowania trzema: pierwsza wartość dla górnego rogu, drugi dla rogu prawego i dolnego dolnego, a trzecia wartość dla prawego dolnego rogu. Ostatni styl na czele 4 zawiera 4 wartości dla właściwości promieniowania granicznego: odpowiednio górny, prawny, lewy dolna i dolna prawa. Zapiszmy i uruchommy ten kod.

Przy użyciu różnych wartości dla promocka granicznego mamy zmienione nagłówki na stronie internetowej pokazane poniżej. Zastosowanie właściwości promieniowania granicznego z 25 pikseli tworzy krzywą promieniowania granicznego ze wszystkich stron na kierunek 1. Następnie użycie właściwości promieniowania granicznego z 2 wartościami wyświetlało bardziej zarysowaną krzywą dla zakrętów lewicowych górnych i prawnych w porównaniu z prawymi i lewymi rogami górnej i dolnej w kierunku 2. Zastosowanie trzech wartości do kierowania trzema pokazuje wyraźną zmianę obramowania zarysu w zakątkach górnych i lewej dolnej w porównaniu z innymi stronami. Ostatni nagłówek pokazał zmianę we wszystkich zakątkach.

Przykład 02:

Czas stworzyć zarys granicy wraz z krzywymi w jej zakątkach. Tak więc używamy w sumie 3 nagłówków w znaczniku „ciała” znacznika HTML. Nagłówki są inicjowane za pomocą znacznika nagłówka „H1”. Największy rozmiar nagłówka do produkowania na stronie internetowej. Wszystkie trzy nagłówki są określone w trzech różnych klasach: A, B i C. Te klasy będą używane w stylu, aby inaczej stylizować nagłówki.

Tak więc, w stylu znacznika „głowy” w pliku HTML, określaliśmy nagłówki wraz z ich klasami, aby je stylizować osobno. Używamy właściwości Radiusa dla wszystkich trzech nagłówków, podczas gdy promień został ustawiony na różne wartości dla trzech nagłówków: 10px, 25px i 50px. Wyściółka i szerokość dla wszystkich trzech nagłówków zostały określone o tych samych wartościach, odpowiednio 10px i 500px. Używamy właściwości wysokości dla pierwszych dwóch nagłówków, 40px każdy. Ustawiamy właściwość tła dla pierwszego nagłówka, zielonego koloru tła.

Właściwość graniczna została użyta dla drugiego i trzeciego nagłówka, aby określić grubość graniczną, 5px. Jego styl jest solidny, a kolor granicy, który ma zostać wygenerowany. Nieruchomość zarysowań dla granic była używana tylko w trzecim nagłówku, tworząc kropkowany kontur o grubości 5 px. Zapiszmy i skompiluj ten kod, aby zobaczyć zmiany.

Wyjście tego kodu HTML pokazuje pierwszą nagłówek niewielką krzywą z narożników bez cienkiej granicy i wypełniona zielonym kolorem tła. Fioletowa granica nagłówka 2 jest curvin, a nagłówek 3 zawiera granicę z kropkowanym zarysem niebieskim.

Wniosek:

Ten przewodnik pokazuje użycie granic w kodach HTML wraz z innymi właściwości. Omówiliśmy przykłady HTML w celu stylizacji krzywych granicy za pomocą właściwości Radiusza Border. Wraz z tym widzieliśmy, w jaki sposób możemy wypełnić granice określonych elementów właściwością tła i tworzyć kontury poza granicą za pomocą właściwości konturowej. W tych przykładach użycie właściwości szerokości, wysokości i wyściółki było bardzo korzystne do użycia w kodzie.