Deweloperzy mogą zastosować wiele właściwości CSS, aby uatrakcyjnić swoje strony internetowe, na przykład „ wysokość ' I ' szerokość ” właściwości ustawiania rozmiaru, “ wyrównanie tekstu ” do dostosowywania tekstu, „ styl graniczny ' I ' promień granicy ” właściwości ustawiania obramowania wokół elementu. Dodatkowo możesz dodać obramowanie zgodnie z własnymi wymaganiami, na przykład po jednej stronie elementu, tylko po to, aby rzeczy za obiektami były bardziej widoczne.
Ten post pokaże:
Metoda 1: Ustaw obramowanie z jednej strony
W CSS użytkownicy mogą ustawić obramowanie po jednej stronie żądanego elementu. W tym celu „ granica-lewo ”, „ granica-prawo ”, „ szczyt granicy ' I ' granica-dół ” służą do dodawania obramowań z lewej, prawej, górnej lub dolnej strony.
W tej sekcji konkretnie ustawimy obramowanie po lewej stronie kontenera. Aby to zrobić, postępuj zgodnie z poniższymi instrukcjami.
Krok 1: Utwórz kontener div
Najpierw utwórz kontener div za pomocą „
Krok 2: Wstaw nagłówek
Następnie użyj „< h1> ”, aby dodać nagłówek wewnątrz kontenera div. Ponadto możesz również użyć innych tagów nagłówków zgodnie z wymaganiami, takich jak „< h1> ” do „< h6> ” tagi:
< dz ID = „główny dział” >< h1 > Granica z jednej strony h1 >
dz >
Widać, że kontener został pomyślnie utworzony:
Krok 3: Uzyskaj dostęp do kontenera div
Teraz uzyskaj dostęp do kontenera div HTML i uzyskaj dostęp do nazwy klasy. Aby to zrobić, selektor klasy „ # ” jest używany z nazwą klasy.
Krok 4: Wstaw obramowanie tylko z jednej strony
Po uzyskaniu dostępu do kontenera div zastosuj poniższe właściwości CSS:
#główny-div{lewe obramowanie: pełne 5 pikseli czerwony ;
tło: rgb ( 56 , 239 , 245 ) ;
margines: 20px 100px;
szerokość: 200 pikseli; wysokość: 150 pikseli
}
Tutaj:
-
- “ granica-lewo to skrócona właściwość służąca do ustawiania szerokości, stylu i koloru lewego marginesu.
- “ tło ” służy do dostosowywania koloru tła elementu.
- “ margines ” ustawiają przestrzeń poza obwiednią.
- “ szerokość ” określa rozmiar szerokości elementu w kontenerze.
Wynikowy obraz pokazuje obramowanie tylko z jednej strony:
Metoda 2: Ustaw obramowanie ze wszystkich stron z różnymi stylami
Aby ustawić obramowanie ze wszystkich stron w różnych kolorach, użyj powyższego kodu HTML. Następnie uzyskaj dostęp do kontenera div za pomocą nazwy id i selektora:
#główny-div{margines: 80px;
szerokość obramowania: 8px 2px 1px 10px;
promień obramowania: 50px;
styl obramowania: wstawka jednolita w podwójne kropki;
kolor obramowania: rgb ( 40 , 5 , 235 ) rgb ( 238 , 146 , 9 ) rgb ( 255 , 0 , 242 ) rgb ( 19 , 19 , 18 ) ;
}
W powyższym kodzie:
-
- “ margines ” określa puste miejsce na zewnątrz elementu.
- “ szerokość granicy ” ustawia szerokość z różnymi wartościami dla każdej strony. Na przykład dodaliśmy różne wartości w pikselach.
- “ promień granicy ” służy do tworzenia okrągłej krzywej granicy.
- “ styl graniczny ” służy do ustawiania stylu obramowania. W tym scenariuszu dla każdej strony granicy ustawione są cztery różne typy stylów.
- “ kolor ramki ” służy do przypisania koloru do obramowania. Tutaj wartość dla każdej strony jest ustawiona jako inny kolor.
W rezultacie zastosowane zostanie obramowanie z różnymi stylami z każdej strony:
W tym artykule nauczyłeś się różnych sposobów ustawiania obramowania CSS z jednej i wielu stron.
Wniosek
Aby ustawić obramowanie tylko z jednej strony, najpierw utwórz div za pomocą „