Cómo dibujar una línea punteada con CSS

En el desarrollo web, el usuario puede rastrear líneas en diferentes estilos, que incluyen líneas de avión, líneas de tablero, líneas punteadas, etc. Tradicionalmente, las líneas punteadas o discontinuas indican cualquier cosa que se pueda esbozar o cortar. Se han conectado en el pasado a marcador de posición o material no desarrollado en entornos digitales. Además, estas líneas pueden denotar ubicaciones para operaciones de arrastrar y soltar y cargas de archivos.

Este artículo explicará el método para dibujar una línea punteada con CSS.

Cómo dibujar una línea punteada con CSS?

Para dibujar una línea en HTML, los usuarios pueden usar el "

---

" etiqueta. El "

---

El elemento dibuja una línea horizontal en la página web. Además, esta línea se puede diseñar de manera diferente a través de CSS.

Para dibujar una línea punteada en la página web con CSS, pruebe el procedimiento dado.

Paso 1: crear un contenedor "div"

Primero, usa el ""Etiqueta para crear un contenedor en la página HTML. Entonces, agregue un "identificación"Atributo dentro de la etiqueta de apertura" div "para acceder a ella más tarde.

Paso 2: insertar datos de texto

A continuación, incruste los datos de texto entre el contenedor "div".

Paso 3: Agregar "

---

" Etiqueta

Agrega un "

---

"Etiqueta para insertar una línea simple en una página web. Luego, incruste algún texto después de la línea:

Bienvenido al sitio web de Linuxhint

---

Linuxhint Ltd UK

Se puede notar que la línea se ha agregado con éxito:

Paso 4: contenedor de estilo "div"

Acceda al contenedor "Div" con la ayuda del selector de "ID" "#"Y el valor de la identificación como"#linea punteada". Después de eso, aplique las siguientes propiedades CSS dadas:

#linea punteada
borde: ninguno;
Color: RGB (7, 189, 245);
margen: PX 60px;

Aquí:

• • "borde"Agrega un límite alrededor del elemento.
  • "color"Se usa para especificar el color del texto dentro del elemento.
  • "margen"Se utiliza para agregar espacio fuera del límite definido.

Producción

Paso 5: Estilo "

---

" Elemento

Para hacer una lista como una línea punteada, primero, acceda a la "horaEl elemento por nombre de la etiqueta y aplica las propiedades CSS enumeradas a continuación:

hora
Color de fondo: RGB (243, 192, 192);
Top de borde: 3px punteado RGB (10, 53, 245);
Altura: 3px;
Ancho: 50%;

Según el fragmento de código dado:

• • "color de fondo"La propiedad especifica el color en la parte posterior del elemento.
  • "fronterizo"Se utiliza para hacer que la línea horizontal se disculpe.
  • "altura" y "ancho"Se utilizan para determinar el tamaño del elemento:

Se puede observar que hemos dibujado con éxito una línea punteada.

Conclusión

Para dibujar una línea punteada con CSS, primero, agregue una línea simple con la ayuda del "

---

" etiqueta. Entonces, acceda a la "

---

"Elemento por nombre de la etiqueta en CSS. Después de eso, aplique el "fronterizo" o "borde"Propiedad y especifique su valor como"punteado". Esta publicación ha explicado el método para dibujar la línea punteada en HTML usando CSS.