Come disegnare una linea tratteggiata con CSS
Nello sviluppo web, l'utente può tracciare le linee in diversi stili, tra cui linee piane, linee del trattino, linee tratteggiate e così via. Tradizionalmente, le linee punteggiate o tratteggiate indicano tutto ciò che può essere disegnato o ritagliato. Sono stati collegati in passato a segnaposto o materiale non sviluppato in ambienti digitali. Inoltre, queste righe possono indicare posizioni per operazioni di trascinamento e carichi di file.
Questo articolo spiegherà il metodo per disegnare una linea tratteggiata con CSS.
Come disegnare una linea tratteggiata con CSS?
Per tracciare una linea in HTML, gli utenti possono utilizzare il "
"Tag. IL "
"L'elemento disegna una linea orizzontale sulla pagina web. Inoltre, questa linea può essere disegnata in modo diverso tramite CSS.
Per disegnare una linea tratteggiata sulla pagina Web con CSS, prova la procedura data.
Passaggio 1: crea un contenitore "div"
Innanzitutto, usa il “"Tag per creare un contenitore nella pagina HTML. Quindi, aggiungi un "id"Attributo all'interno del tag di apertura" div "per accedervi in seguito.
Passaggio 2: inserire i dati di testo
Successivamente, incorporare i dati di testo tra il contenitore "div".
Passaggio 3: aggiungi "
"Tag
Aggiungere un "
"Tag per inserire una riga semplice in una pagina web. Quindi, incorporare un po 'di testo dopo la riga:
Benvenuti nel sito web di Linuxhint
Linuxhint Ltd UK
Si può notare che la linea è stata aggiunta correttamente:
Passaggio 4: contenitore "div" stile
Accedi al contenitore "Div" con l'aiuto del selettore "ID" "#"E il valore dell'ID come"#linea tratteggiata". Successivamente, applica le proprietà CSS indicate di seguito:
#linea tratteggiata
confine: nessuno;
Colore: RGB (7, 189, 245);
Margine: PX 60px;
Qui:
-
- "confine"Aggiunge un limite attorno all'elemento.
- "colore"Viene utilizzato per specificare il colore del testo all'interno dell'elemento.
- "margine"Viene utilizzato per aggiungere spazio al di fuori del confine definito.
Produzione
Passaggio 5: stile "
"Elemento
Per fare un elenco come una linea tratteggiata, prima, accedi al "hr"Elemento per nome del tag e applicare le proprietà CSS elencate di seguito:
hr
Background-color: RGB (243, 192, 192);
Border-top: 3px punteggiato RGB (10, 53, 245);
Altezza: 3px;
larghezza: 50%;
Secondo lo snippet di codice dato:
-
- "colore di sfondo"La proprietà specifica il colore sul retro dell'elemento.
- "Border-top"È utilizzato per rendere punteggiata la linea orizzontale.
- "altezza" E "larghezza"Sono usati per determinare la dimensione dell'elemento:
Si può osservare che abbiamo disegnato con successo una linea tratteggiata.
Conclusione
Per disegnare una linea tratteggiata con CSS, prima, aggiungi una linea semplice con l'aiuto di "
"Tag. Quindi, accedi al "
"Elemento per nome tag in CSS. Dopodiché, applica il "Border-top" O "Border-Bottom"Proprietà e specifica il suo valore come"punteggiato". Questo post ha spiegato il metodo per disegnare la linea tratteggiata in HTML usando CSS.