Deweloperzy mogą zastosować wiele właściwości CSS, aby ich strony internetowe były bardziej atrakcyjne, na przykład „wysokość" I "szerokość„Właściwości ustalania wielkości”, „tekst-align”W celu dostosowania tekstu„ ”styl graniczny" I "Radiusz graniczny”Właściwości ustawiania granicy wokół elementu. Dodatkowo możesz dodać granicę zgodnie ze swoimi wymaganiami, na przykład po jednej stronie elementu, tylko po to, aby rzeczy za obiekty były bardziej widoczne.

Ten post będzie pokazał:

• • Metoda 1: Ustaw obramowanie z jednej strony
  • Metoda 2: Ustaw granicę ze wszystkich stron o różnych stylach

Metoda 1: Ustaw obramowanie z jednej strony

W CSS użytkownicy mogą ustawić obramowanie po jednej stronie pożądanego elementu. W tym celu „LEST Border”,„prawej granicy”,„Top graniczny" I "Bottom graniczny”Właściwości są używane do dodawania granic po lewej, prawej, górnej lub dolnej stronie.

W tej sekcji specjalnie ustawimy granicę po lewej stronie pojemnika. Aby to zrobić, postępuj zgodnie z poniższymi instrukcjami.

Krok 1: Utwórz kontener Div

Najpierw stwórz kontener DIV za pomocą „”Tag. Wstaw „„ID”Atrybut i przypisz nazwę do identyfikatora.

Krok 2: Wstaw nagłówek

Następnie skorzystaj z „<H1>„Tag, aby dodać nagłówek do pojemnika Div. Ponadto możesz również używać innych tagów nagłówkach zgodnie z wymogiem, takie jak „<H1>" Do "<H6>„Tagi:

Border z jednej strony

Można zauważyć, że pojemnik został pomyślnie utworzony:

Krok 3: Dostęp do kontenera Div

Teraz uzyskaj dostęp do kontenera HTML Div i uzyskaj dostęp do nazwy klasy. Aby to zrobić, selektor klasowy „#”Jest używany z nazwą klasy.

Krok 4: Włóż granicę tylko z jednej strony

Po uzyskaniu dostępu do kontenera Div zastosuj poniżej wspomniane właściwości CSS:

#Main-Div
LEST Border-Left: 5px stały czerwony;
Tło: RGB (56, 239, 245);
Margines: 20px 100px;
szerokość: 200px; Wysokość: 150px

Tutaj:

• • "LEST Border to krótka właściwość do ustawiania szerokości, stylu i koloru granicznego.
  • "tło„Właściwość jest wykorzystywana do regulacji koloru tła elementu.
  • "margines”Właściwości ustawiają przestrzeń poza granicą.
  • "szerokość”Definiuje wielkość szerokości elementu w pojemniku.

Wynikowy obraz pokazuje granicę tylko jedną stroną:

Metoda 2: Ustaw granicę ze wszystkich stron o różnych stylach

Aby ustawić granicę ze wszystkich stron w różnych kolorach, użyj powyższego kodu HTML. Następnie uzyskaj dostęp do kontenera Div za pomocą nazwy identyfikacyjnej i selektora:

#Main-Div
Margines: 80px;
szerokość graniczna: 8px 2px 1px 10px;
Radiusz graniczny: 50px;
Styl graniczny: wstawka solidna podwójna kropek;
kolor graniczny: RGB (40, 5, 235) RGB (238, 146, 9) RGB (255, 0, 242) RGB (19, 19, 18);

W powyższym kodzie:

• • "margines”Określa pustą przestrzeń poza elementem.
  • "szerokość granicy”Ustawia szerokość z różnymi wartościami dla każdej strony. Na przykład dodaliśmy różne wartości w pikselach.
  • "Radiusz graniczny”Jest wykorzystywany do tworzenia okrągłej krzywej granicy.
  • "styl graniczny„Własność służy do ustawiania stylu granicy. W tym scenariuszu ustawiono cztery różne rodzaje stylów na każdą stronę granicy.
  • "kolor ramki„Nieruchomość jest wykorzystywana do przydzielania koloru na granicę. Tutaj wartość dla każdej strony jest ustawiona jako inny kolor.

W rezultacie zostanie zastosowana granica z różnymi stylami z każdej strony:

W tym artykule nauczyłeś się różnych sposobów ustawiania granicy CSS na po prostu i wielu stronach.

Wniosek

Aby ustawić granicę tylko z jednej strony, najpierw stwórz div za pomocą „" element. Następnie uzyskaj dostęp do kontenera Div i zastosuj właściwości CSS. Następnie użyj dowolnej nieruchomości wśród nich, w tym „LEST Border”,„prawej granicy”,„Top graniczny" I "Bottom graniczny„Aby ustawić obramowanie jednej strony. Ponadto użytkownicy mogą również ustawić „szerokość granicy”,„styl graniczny" I "kolor ramki”Osobno po każdej stronie granicy. W tym poście wyjaśniono metodę ustawiania granicy CSS tylko z jednej strony.