CSS WEales Borders

HTML to język programowania, który zapewnia ramy dla stron internetowych, podczas gdy CSS pozwala nam dostosować elementy. Różne właściwości CSS są określone w celu wdrożenia różnych typów na stronie internetowej, w tym kolor tła, rozmiar czcionki, obramowanie, promień graniczny i pudełko. Dokładniej, "styl graniczny" I "Shadow Box„Właściwości są wykorzystywane do ustawiania efektów wewnątrz lub poza granicą.

W tym poście wyjaśni metody wstawienia granic w CSS.

Co to są granice CSS?

Wartość graniczna CSS jest szeroko stosowana z „styl graniczny„Własność w celu zastosowania efektu granicznego 3D na elementy HTML i zwykle zależy od wartości koloru granicznego.

Istnieją różne metody wstawienia granic w CSS podano poniżej:

• Metoda 1: Dodaj wstawkę z „z„styl graniczny" nieruchomość
• Metoda 2: Dodaj wstawkę z „z„Shadow Box" nieruchomość

Metoda 1: Dodaj wstawkę z właściwością „w stylu granicznym”

Do wstawki z „z”styl graniczny„Własność, postępuj zgodnie z podaną procedurą:

• Po pierwsze, stwórz nagłówek z „

  ”Tag.

• Następnie dodaj „styl”Przypisuj stylizację nagłówka zgodnie z Twoimi preferencjami. Na przykład nagłówek jest stylizowany jako „Text-Align: Center".
• Następnie dodaj tekst do nagłówka między „

  ”Tagi.

• Utwórz pojemnik Div ​​i wstaw „ID" atrybut:

Wstawka granica

Zastosuj obramowanie CSS za pomocą nieruchomości „w stylu granicznym”

Tutaj zastosuj właściwości CSS na utworzonym kontenerze Div:

#border-div
Tło: Przezroczysty adres URL (emoji.png) 50% bez powtórzenia;
Min-Height: 300px;
MIN-PIDTH: 200px;
Margines: 0px 200px;
Styl graniczny: wstawka;

Szczegóły dotyczące wyżej wymienionych nieruchomości omówiono poniżej:

• „„tło„Właściwość jest wykorzystywana do ustawiania wszystkich właściwości stylu tła, takich jak kolor, obraz, pochodzenie i rozmiar lub metoda powtórzeń.
• "Min-Height„Właściwość określa najniższą wysokość elementu.
• "Min szerokość”Funkcja określa najmniejszą szerokość dla elementu.
• "margines”Właściwość określa przestrzeń dla elementu wokół zdefiniowanej granicy.
• "styl graniczny„Właściwość służy do stylizacji granicy do wyświetlania wokół elementu.
• "wstawka„Wartość jest wykorzystywana do robienia cieni w pudełku.

Wyjście

Przejdźmy do innej metody dodania wstawki.

Metoda 2: Dodaj obramowanie wstawki z właściwością „pudełka”

Zastosować granicę wstawkową z „Shadow Box„Własność, utwórz kontener Div, postępując zgodnie z tym samym scenariuszem:

Wstawka granica

Zastosuj granicę wstawkową za pomocą właściwości „box-shadow”

#border-div
Tło: Przezroczysty adres URL (emoji.png) 50% bez powtórzenia;
MIN-PIDTH: 200px;
Min-Height: 300px;
Margines: 0px 200px;
Box-Shadow: wstawka 0 0 10px RGB (228, 164, 27);

Uzyskaj dostęp do kontenera Div za pomocą „#granica-div”Atrybut id i zastosuj te same właściwości CSS, w tym„tło”,„Min szerokość”,„Min-Height”,„margines", I "Shadow Box". Dokładniej:

• „„Shadow Box”Właściwość wkłada cień poza elementem.
• "wstawka„Wartość jest zdefiniowana jako cień w pudełku o określonym kolorze”RGB (228, 164, 27)".

Wyjście

Alternatywnie użytkownicy mogą dodać wiele wartości cienia dla gęstości obramowania budowania. W tym celu postępuj zgodnie z dostarczonym kodem:

Box-Shadow: wstawka 0 0 20px RGB (89, 0, 255), wstawka 0 0 20px RGB (0, 183, 255), wstawka 0 0 20px RGB (0, 183, 255);

Wyjście

Stwierdziliśmy metodę zastosowania granicy wstawki w CSS.

Wniosek

Granice wstawki CSS to granice 3D ustawione na elementach HTML. Aby ustawić granicę wstawkową, CSS ”styl graniczny" I "Shadow Box„Można zastosować właściwości. „„Wstawka„Wartość określonych właściwości jest zdefiniowana w celu tworzenia cieni i wielu efektów wewnątrz granicy. Ten post wykazał metody stosowania granic wstawkowych w CSS.