Jak ograniczyć długość granicy? - CSS

Podczas projektowania strony internetowej użytkownicy mają trudności z tworzeniem granicy krótszej niż jej element nadrzędny. Aby przezwyciężyć tę trudność, stosuje się wiele właściwości CSS i elementów HTML. W tym celu niektóre elementy HTML, w tym „”,„", Lub "pseudoelementy" I "granica„Używane są właściwości. Ponadto użytkownicy mogą ograniczyć granicę za pomocą „LEST Border”,„Bottom graniczny”,„prawej granicy", I "Top graniczny" nieruchomości.

W tym poście wyjaśniono metodę ograniczenia długości granicy w CSS.

Jak ograniczyć długość granicy za pomocą CSS?

Aby ograniczyć długość granicy za pomocą CSS, wypróbuj wspomniane instrukcje jeden po drugim.

Krok 1: Utwórz kontener Div

Najpierw stwórz kontener DIV z „”Tag i dodaj„klasa”Atrybut wewnątrz znacznika.

Krok 2: Utworzone zagnieżdżone kontener Div

Następnie dodaj kolejny kontener Div między pierwszymi tagami i wstaw „„ID" atrybut:

Krok 3: Styl elementu „Div”

Teraz stygnij „div„Stosując następujące właściwości CSS:

.Main-Div
Wysokość: 150px;
szerokość: 100px;
Pozycja: względny;
Tło: #B3F00B;

Szczegóły wyżej wymienionego kodu są następujące:

• Najpierw uzyskaj dostęp do kontenera za pomocą „.Main-Div" klasa.
• Dodano „wysokość„Własność określa wysokość kontenera Div.
• Następnie, "szerokość”Definiuje rozmiar szerokości elementu.
• Następny, "pozycja”Przydziela typ metody pozycjonowania stosowany dla elementu. Na przykład wykorzystaliśmy „względny„Aby zmienić pozycję w stosunku do siebie i elementu nadrzędnego.
• Po tym, "tło”Służy do ustawiania tła dla Div.

Wyjście

Krok 4: Ustaw dolną granicę

Bottom graniczny: 2px stały #1C2AF5;

Aby ustawić dolną granicę div, CSS ”Bottom graniczny”Jest wykorzystywany. Tutaj pierwsza wartość określa szerokość obramowania, druga to styl graniczny, a trzeci to kolor graniczny.

Wyjście

Krok 5: Ogranicz pozostawiona granica

#graniczne lew
LEST BERDEFT: 2px Solid #2a1cf5;
Pozycja: absolutna;
TOP: 50%;
Dół: 0;

W powyższym kodzie „#graniczna lewica”Służy do uzyskania dostępu do elementu DIV do zastosowania właściwości poniżej listy:

• „„LEST Border”To skrót i jest wykorzystywana do ustawiania lewej granicy elementu.
• "szczyt”Własność pionowo wyrównuje pozycjonowany element.
• "spód”Jest wykorzystywany do wyrównania dolnej krawędzi pozycjonowanego elementu.
• "pozycja„Własność jest ustalona jako„absolutny„Aby naprawić pozycję pojemnika.

Wyjście

Wyjaśniliśmy procedurę ograniczenia długości granicy w CSS.

Wniosek

Aby ograniczyć długość granicy, najpierw zrób zagnieżdżony kontener Div za pomocą „”Tag. Następnie dostęp do niego za pomocą konkretnej klasy lub identyfikatora i zastosuj właściwości CSS do stylizacji. Następnie CSS „Bottom graniczny”Jest wykorzystywany do ustawiania dolnej granicy elementu i„LEST Border”Własność dodaje obramowanie po lewej stronie elementu. Ten samouczek wyjaśnił, jak ograniczyć długość granicy za pomocą CSS.