Jak narysować kropkowaną linię z CSS

W tworzeniu stron internetowych użytkownik może śledzić linie w różnych stylach, w tym linie płaskie, linie Dash, kropkowane linie i tak dalej. Tradycyjnie kropkowane lub przerywane linie wskazują wszystko, co można naszkicować lub wyciąć. W przeszłości były one połączone z symbolami zastępczymi lub nierozwiniętymi w środowiskach cyfrowych. Dodatkowo te linie mogą oznaczać lokalizacje operacji przeciągania i upuszczania i przesyłania plików.

Ten zapis wyjaśni metodę rysowania kropkowanej linii z CSS.

Jak narysować kropkowaną linię z CSS?

Aby narysować linię w HTML, użytkownicy mogą korzystać z „

---

”Tag. „„

---

„Element rysuje poziomą linię na stronie internetowej. Ponadto, linia ta może być stylizowana inaczej przez CSS.

Aby narysować kropkowaną linię na stronie internetowej z CSS, wypróbuj daną procedurę.

Krok 1: Utwórz pojemnik „Div”

Najpierw użyj „„Tag, aby utworzyć kontener na stronie HTML. Następnie dodaj „ID”Atrybut w obrębie znacznika otwierającego„ Div ”, aby uzyskać do niego dostęp.

Krok 2: Wstaw dane tekstowe

Następnie osadzaj dane tekstowe pomiędzy kontenerem „Div”.

Krok 3: Dodaj „

---

”Tag

Dodać "

---

„Tag, aby wstawić prostą linię na stronie internetowej. Następnie osadziłem trochę tekstu po wierszu:

Witamy na stronie internetowej Linuxhint

---

Linuxhint Ltd UK

Można zauważyć, że linia została pomyślnie dodana:

Krok 4: Style „Div” pojemnik

Uzyskaj dostęp do kontenera „Div” za pomocą selektora „id” „#”I wartość id jako„#linia przerywana". Następnie zastosuj poniższe podane właściwości CSS:

#linia przerywana
Border: Brak;
Kolor: RGB (7, 189, 245);
Margines: Px 60px;

Tutaj:

• • "granica”Dodaje granicę wokół elementu.
  • "kolor”Służy do określenia koloru tekstu wewnątrz elementu.
  • "margines”Jest wykorzystywany do dodawania przestrzeni poza zdefiniowaną granicą.

Wyjście

Krok 5: Styl „

---

" Element

Aby stworzyć listę jako linia kropkowana, najpierw uzyskać dostęp do „Hr”Element według nazwy znacznika i zastosuj poniższe wymienione właściwości CSS:

HR
kolor tła: RGB (243, 192, 192);
T-TOP: 3px kropkowane RGB (10, 53, 245);
Wysokość: 3px;
Szerokość: 50%;

Według danego fragmentu kodu:

• • "kolor tła„Właściwość określa kolor na tylnym podrębie elementu.
  • "Top graniczny”Jest wykorzystywany do robienia kropkowanej linii poziomej.
  • "wysokość" I "szerokość”Służą do określenia rozmiaru elementu:

Można zauważyć, że z powodzeniem narysowaliśmy kropkowaną linię.

Wniosek

Aby narysować kropkowaną linię z CSS, najpierw dodaj prostą linię za pomocą „

---

”Tag. Następnie uzyskaj dostęp do „

---

”Element według nazwy znacznika w CSS. Następnie zastosuj „Top graniczny" Lub "Bottom graniczny”Właściwość i określ jej wartość jako„kropkowany". Ten post wyjaśnił metodę rysowania linii kropkowanej w HTML za pomocą CSS.