Jak wiemy, HTML zapewnia strukturę stron internetowych, a CSS można wykorzystać do stosowania stylów. CSS ma również różne właściwości stylistyczne, które są używane do rysowania różnych kształtów, takich jak kwadraty, kółka, prostokąty, owale, linie i inne. Mówiąc dokładniej, linia jest jednym z najbardziej wszechstronnych i powszechnie używanych elementów, które można dodać poziomo i pionowo.

Ten artykuł nauczy procedury rysowania poziomych i pionowych linii za pomocą CSS. Zacznijmy!

Jak narysować linię z CSS?

Aby narysować poziome i pionowe linie za pomocą CSS, można zastosować różne właściwości, takie jak:

• "LEST Border"
• "prawej granicy"
• "Top graniczny"
• "Bottom graniczny"

Idźmy naprzód, aby zrozumieć działanie powyżej wyposażonych właściwości jeden po drugim!

Html
Aby narysować linie, po pierwsze, określamy „„Element wewnątrz ciała naszego pliku HTML:

Teraz, aby stylizować div, użyć odpowiednich właściwości. W naszym przypadku przypisamy „kolor tła„Wartość nieruchomości jako„#e4a2a4”I„ „granica„Wartość nieruchomości jako„2px solid #0fafc4”, Który wskazuje odpowiednio jego szerokość, rodzaj i kolor oraz„wysokość„Własność jest ustalona jako„200px".

CSS

div
kolor tła: #e4a2a4;
Border: 2px Solid #0FAFC4;
Wysokość: 200px;

Przykład 1: Narysuj poziomą linię z CSS
Zwykle

---

Element jest wykorzystywany do rysowania linii poziomych w HTML. Jednak, aby narysować poziomą linię z CSS, dodaj

element nagłówka, a następnie umieść nazwisko „H_line”Wewnątrz wyżej opisanej div pliku HTML.

Html

Linia pozioma

Teraz użyj właściwości CSS, aby narysować linię poziomą:

• Użyjemy „Bottom graniczny”Własność, która jest powiązana z od jednego do trzech wartości dla szerokości linii, typu linii i koloru. Poniższy przykład ustawia jego wartość jako „6px stały RGB (80,80,78)".
• Aby dostosować rozmiar linii, ustawiliśmy „szerokość„Wartość nieruchomości jako„300px".
• „„margines„Wartość właściwości jest ustalana jako„automatyczny”, Reprezentując, że margines jest równy ze wszystkich stron. „„dno„W tym celu można również wykorzystać nieruchomość.

CSS

.h_line
Bottom graniczny: 6px stały RGB (80, 80, 78);
szerokość: 300px;
Margines: Auto;

Teraz zapisz plik HTML i otwórz go w przeglądarce:

Jak widać, z powodzeniem narysowaliśmy linię poziomą z własnością graniczną CSS.

Przykład 2: Narysuj linię pionową z CSS
Aby narysować linię pionową, dodamy

Tag na nagłówek, a następnie umieść nazwisko „v_line”Wewnątrz wyżej opisanej div pliku HTML.

Html

Pionowa linia

Podajmy „v_line„Div z niektórymi właściwościami CSS. Aby narysować linię pionową, wykorzystamy:

• „„LEST Border„Właściwość jest przypisywana wartościami”5px stały RGB (2, 99, 135)”, Gdzie pierwsza wartość reprezentuje szerokość linii, druga wartość reprezentuje typ linii, a trzecia wartość wskazuje kolor.
• „„prawy dolny„Własność można również wykorzystać w tym samym celu.
• Następnie zdefiniowaliśmy „wysokość”100px".
• Ustawić "margines" Jak "0 Auto”, Gdzie 0 wskazuje górną i dolną, a automatyczne reprezentuje równy margines od lewej i prawej.
• Aby pokazać szerokość linii, przypisaliśmy „szerokość„Wartość nieruchomości jako„2px".

CSS

.v_line
LEST BERDEFT: 5PX Solid RGB (2, 99, 135);
Wysokość: 100px;
Margines: 0 Auto;
szerokość: 2px;

Zastosowanie tych wartości narysuje linię pionową w ten sposób:

Otóż ​​to! Użyliśmy różnych właściwości CSS do rysowania linii poziomych i pionowych.

Wniosek

Możesz użyć „Top graniczny" Lub "Bottom graniczny„Właściwości do narysowania poziomej linii i„LEST Border" Lub "prawej granicy”Właściwości do narysowania pionowej linii w CSS. Ta właściwość ma wartości od jednego do trzech, gdzie pierwsza wartość określa szerokość, druga wartość określa jej typ, czy to solid, kropkowane, przerywane czy rowka, a trzecia wartość wskazuje kolor linii. Ten przewodnik wyjaśnił, jak rysować poziome i pionowe linie z CSS.