Promień konturu CSS

Przez większość czasu zwykle mieszamy zarys hTML z własnością graniczną. Podczas gdy obie nieruchomości są dość zróżnicowane. Nieruchomość graniczna może zajmować dodatkową przestrzeń. Zarys dowolnego elementu nie może zająć miejsca i może się pokryć również z innymi elementami. Nie możemy ustawić boków konturu dla określonego elementu. Możemy jednak osobno ustawić wszystkie 4 strony granicy. Ponadto nie możesz zmienić rozmiaru lub pozycji elementu za pomocą otaczającego go konturu. Zarys jest zawsze po zewnętrznej stronie elementu, a granica jest używana do wewnętrznej strony elementu. Będziemy reprezentować użycie konturu w kodach HTML wraz z sprawdzaniem jego promienia.

Przykład nr 01:

Zacznijmy od użycia granic w naszym przykładzie. Następnie będziemy przyjmować na nieruchomości zarys. Korzystając z podstawowej składni tworzenia pliku HTML, używamy tagów HTML, Head, Style i Body w tym programie kodu Visual Studio. W obrębie znacznika ciała używamy dwóch nagłówków za pomocą tagów nagłówka rozmiaru H1 i H2. H1 jest największym dostępnym nagłówkiem i można go skrócić do H6-, który jest najmniejszy dostępny rozmiar. H1 zawiera prosty 2-słowy „przykład graniczny”. Podczas gdy H2 zawiera długie zdanie. W stylu znacznika „głowy” stylowaliśmy nagłówek „H2”, dodając na niej niebieską granicę 3 pikseli. Zapiszmy ten kod i uruchom go w przeglądarce Google Chrome.

Po uruchomieniu tego kodu HTML kodu Visual Studio w dowolnej przeglądarce mamy wyniki pokazane poniżej. Pierwszy nagłówek został uznany za prosty nagłówek bez żadnego stylizacji. Podczas gdy drugi nagłówek był wyświetlany z niebieską stałą obramową 3 pikseli.

Dodajmy granicę i oba oba jednocześnie na dowolnym kierunku, aby zobaczyć różnicę. Używamy stylizacji do nagłówka H2, jak pokazano. Dodaliśmy dodatkową linię w stylu H1 do tworzenia zarys. Ten zarys będzie w kolorze zielonym i kropkowanym formatem. Każda z jego kropek będzie miała 5 pikseli zgodnie z określonymi. Granica jest już zdefiniowana jako 2 pikseli stały niebieski. Zapiszmy i debugujmy ten kod HTML Visual Studio i uruchom go w przeglądarce.

Wyjście powyższego kodu HTML wyświetlało stronę pokazywaną. Niebieski kolor wokół nagłówku „H2” pokazuje solidną granicę, podczas gdy zielona kropkowana linia pikseli rozmiar 5 ilustruje zarys nagłówka 2. Teraz możesz zobaczyć różnicę.

Przykład nr 02:

Zarys może być również solidny, podobnie jak granica. Weźmy na jeszcze jeden przykład, aby stworzyć nowy solidny zarys. Używaliśmy więc tego samego pliku z niewielką różnicą od powyższego kodu. W tym pliku HTML używamy tego samego nagłówka H1 w rozmiarze 1, a do utworzenia nowej sekcji na tej samej stronie HTML użyliśmy znacznika „div”. Możesz dodać więcej niż 1 element w sekcji „Div”. W tej chwili dodaliśmy w nim prostą linię tekstową, aby nakreślić znacznik „div” ”. W stylu tego pliku HTML używamy tytułu znacznika „Div”, aby go stylizować. Używamy właściwości zarysowej, aby zarysować 3 piksele. Ten zarys będzie solidny bez krewek i kropek. Jego kolor będzie „żółty-zielony”, jak określono w obszarze stylu. Wartość „3px” została użyta do określenia długości konturu- jak gruba lub cienka. Zapiszmy ten kod i uruchom go w przeglądarce, aby zobaczyć wyniki.

Żółty zielony zarys kolorów o rozmiarach 3 pikseli został wygenerowany wokół zewnętrznej strony elementu „Div”. Wygląda bardzo podobnie do granic, chociaż jego kierunek jest zawsze na zewnątrz.

We wszystkich powyższych przykładach omówiliśmy tworzenie solidnej granicy, solidnego zarysu i przerywanego konturu w pliku HTML. Teraz będziemy tworzyć przerywany zarys wokół elementu HTML. Jak dotąd próbowaliśmy użyć tego samego skryptu HTML w kodzie Visual Studio. Jedną zmianą, którą dokonaliśmy w stylu, to użycie słowa kluczowego „przerywanego” zamiast „solidnego” do projektowania zarysu 3 pikseli. Ponadto zmieniliśmy kolor konturu na „Blue-Violet”. Zapiszmy ten zaktualizowany skrypt HTML i wykonajmy go.

Po udanym debugowaniu tego kodu HTML w kodzie Visual Studio, został on wykonany w przeglądarce Chrome i mamy pokazane dane wyjściowe. Przerywany zarys niebiesko-fioletowy został wygenerowany wokół sekcji „Div” tej strony statycznej HTML.

Przykład nr 03:

Rzućmy okiem na promień konturu w skrypcie HTML. Jak już omówiliśmy w akapicie wprowadzającym, nie możemy określić wartości dla każdej strony konturu osobno, tak jak możemy zrobić dla granic. Tak więc, w tym samym pliku HTML, w razie potrzeby zaktualizowaliśmy nadwozie i tag stylu. Używaliśmy w sumie 1 tagu nagłówka „H1”, 4 „Div” znaczników i 3 tagów akapitu „P”.

Nagłówek będzie miał największy rozmiar („przykład zarysu”), podczas gdy wszystkie 4 tagi „div” zawierają 4 określone klasy „A”, „B”, „C” i „D” dla tworzenia 4 sekcji w obrębie 4 sekcji w obrębie 4 sekcji w obrębie 4 sekcji w obrębie 4 sekcji Ta sama strona HTML. Akapity pozostały puste tylko ze względu na styl. To jest dla znacznika „ciała”. Korzystając z określonych klas każdego znacznika „div”, określamy właściwość „zarys”. Będzie tworzył przerywany zarys niebieskiego przemocy dla pierwszej i 3. sekcji „Div” oraz „kropkowane” zarys niebieskiego przemocy dla drugiego i 4. tagu „Div”. Wszystkie te kontury będą miały tę samą szerokość, „4px”. Wykorzystaliśmy właściwość „-moz-Outline-Radius”, aby określić wartości dla każdej strony konturu osobno. Ustawiliśmy promień lewej strony dla div 1, lewej/prawej strony dla div 2, lewej/prawej/górnej strony dla div 3 i wszystkich 4 boków dla div 4. Szerokość, margines i wyściółka dla wszystkich 4 sekcji „div” były takie same. Przetestujmy teraz wynik tego kodu.

Po wykonaniu tego kodu HTML otrzymaliśmy ten sam rozmiar 4-pikselowe kontury dla wszystkich sekcji. Zastosowanie właściwości RADIUS nie wpływa na wyjście, podczas gdy szerokość została zaktualizowana przy użyciu „szerokości” sekcji „Div”.

Wniosek:

Wstępny akapit został wykorzystany do wykazania wyraźnej różnicy między właściwością graniczną a zarysem właściwości stylizacji CSS w HTML. W przypadku przykładów, które użyliśmy w tym artykule, omówiliśmy tworzenie różnych rodzajów zarysów w porównaniu z granicami wraz z ich różnicami. Omówiliśmy również przykład, aby pokazać, że promienia konturu nie można zmienić i całkowicie zależy od granicy elementu, aby go podświetlić, a także może się nakładać.