Border jest jedną z fantastycznych właściwości CSS, która jest używana do określania granicy elementu. CSS pozwala programistom dodawać granice wokół elementu za pomocą „granica" nieruchomość. Ponadto użytkownicy mogą zastosować więcej niż jedną granicę wokół elementu o tych samych kolorach i różnych kolorach za pomocą ”:zanim" I ":Po”Selektory CSS.

Ten samouczek nauczy cię stosować podwójną granicę o różnych kolorach, wykorzystując właściwości CSS.

Jak nakładać podwójną granicę w różnych kolorach w CSS?

Aby zastosować podwójną granicę różnymi kolorami, sprawdź podane instrukcje.

Krok 1: Wstaw nagłówek

Początkowo wstaw metkę nagłówka za pomocą „

”Tag. Ten znacznik służy do określenia nagłówka poziomu pierwszego.

Krok 2: Utwórz kontener Div

Następnie utwórz kontener DIV za pomocą „”Tag. Wewnątrz tagu Div dodaj klasę „podwójny".

Krok 3: Dodaj tekst w akapicie

Następnie użyj „

”Element i przypisz go klasa„granica". Następnie osadziłem tekst między „

Linuxhint Ltd UK

Linuxhint zapewnia treść dla różnych kategorii, w tym Docker, HTML/CSS, Discord, PowerShell, Windows, Github i wiele innych.

Można zauważyć, że tekst w akapicie został pomyślnie dodany:

Krok 4: Dostęp do elementu „Div”

Teraz uzyskaj dostęp do kontenera „Div” za pomocą przypisanej klasy ”.podwójny".

Krok 5: Dodaj pojedynczą granicę

Aby dodać pojedynczą granicę, zastosuj podane właściwości:

.podwójny granica
Pozycja: względny;
kolor tła: RGB (59, 194, 247);
granica: 4px Solid RGB (255, 113, 113);
Wyściółka: 1em;
Margines: 0 Auto;
Wysokość: 10em;
szerokość: 14em;

W danym bloku kodu:

• "pozycja”Określa pozycję elementu. Na przykład ustawiliśmy „względny”Położenie do pozycji w stosunku do swojej normalnej pozycji.
• "kolor tła”Oczywiście wykorzystywana do ustawiania koloru elementów z tyłu.
• "granica”Służy do przydzielenia granicy wokół elementu.
• "wyściółka”Określa przestrzeń wokół treści elementu.
• "margines- Przydziela pustą przestrzeń wokół granicy zdefiniowanego elementu.
• "wysokość”Określa wysokość elementu.
• "szerokość”Określa do ustawiania szerokości wielkości elementu.

W rezultacie granica zostanie dodana w ten sposób:

Krok 6: Dodaj podwójną granicę

Teraz dostęp do klasy za pomocą nazwy klasy wraz z „:zanim”Selektor. Następnie zastosuj następujące właściwości:

.podwójny: przed
Tło: Brak;
Border: 4px Solid RGB (19, 18, 18);
treść: "";
Blok wyświetlacza;
Pozycja: absolutna;
TOP: 5px;
po lewej: 5px;
Racja: 5px;
Dół: 5px;

Opis wyżej ocenianych właściwości jest następujący:

• "granica„Wystarcza się tutaj, aby wstawić kolejną granicę wokół elementu. Tutaj "RGB”Wartość przypisuje inny kolor do granicy.
• „„treść„Nieruchomość jest wykorzystywana z„:zanim" I ": After ”pseudoelementy do wstawienia utworzonych materiałów.
• "wyświetlacz”Określa, jak wygląda element.
• Tutaj, "pozycja”Jest ustawiony jako„absolutny”, Co oznacza, że ​​pozycja jest ustalona lub bezwzględna.
• "szczyt„Właściwość określa górną pozycję elementu.
• "lewy”Określa pozycję elementu po lewej stronie.
• "Prawidłowy”Służy do określenia właściwej pozycji elementu.
• "spód”Służy do określenia dolnej pozycji elementu:

Można zauważyć, że pomyślnie dodaliśmy podwójną granicę wokół elementu.

Wniosek

Aby zastosować podwójną obramowanie z różnymi kolorami w CSS, najpierw utwórz pojemnik Div ​​i przypisz go klasę „podwójne”. Następnie uzyskaj dostęp do elementu według klasy i zastosuj właściwości CSS, w tym „granica”,„pozycja" Jak "względny" i inni. Następnie ponownie uzyskaj dostęp do elementu według nazwy klasy wraz z „:zanim”Selektor i zastosuj„granica„Nieruchomość z pozycją jako„absolutny". Ten post nauczył cię metody stosowania podwójnych granic z różnymi kolorami w CSS.