Como desenhar uma linha pontilhada com CSS

No desenvolvimento da web, o usuário pode rastrear linhas em diferentes estilos, incluindo linhas de avião, linhas de traço, linhas pontilhadas e assim por diante. Tradicionalmente, linhas pontilhadas ou tracejadas indicam qualquer coisa que possa ser esboçada ou cortada. Eles foram conectados no passado ao espaço reservado ou material não desenvolvido em ambientes digitais. Além disso, essas linhas podem denotar locais para operações de arrastar e soltar e uploads de arquivos.

Este artigo explicará o método para desenhar uma linha pontilhada com CSS.

Como desenhar uma linha pontilhada com CSS?

Para desenhar uma linha no HTML, os usuários podem usar o “

---

" marcação. O "

---

”O elemento desenha uma linha horizontal na página da web. Além disso, essa linha pode ser estilizada de maneira diferente através de CSS.

Para desenhar uma linha pontilhada na página da web com CSS, experimente o procedimento fornecido.

Etapa 1: Crie um contêiner "div"

Primeiro, use o “”Tag para criar um contêiner na página HTML. Então, adicione um “eu ia”Atributo dentro da etiqueta de abertura“ div ”para acessá -lo mais tarde.

Etapa 2: Insira dados de texto

Em seguida, incorporar dados de texto entre o contêiner "div".

Etapa 3: Adicionar “

---

" Marcação

Adicione um “

---

”Tag para inserir uma linha simples em uma página da web. Em seguida, incorpore algum texto após a linha:

Bem -vindo ao site Linuxhint

---

Linuxhint Ltd UK

Pode -se notar que a linha foi adicionada com sucesso:

Etapa 4: estilo “Div” contêiner

Acesse o contêiner "div" com a ajuda do seletor "ID" "#”E o valor do id como“#linha pontilhada”. Depois disso, aplique as propriedades CSS abaixo:

#linha pontilhada
fronteira: nenhuma;
Cor: RGB (7, 189, 245);
margem: px 60px;

Aqui:

• • ““fronteira”Adiciona um limite ao redor do elemento.
  • ““cor”É usado para especificar a cor do texto dentro do elemento.
  • ““margem”É utilizado para adicionar espaço fora do limite definido.

Saída

Etapa 5: estilo “

---

" Elemento

Para fazer uma lista como uma linha pontilhada, primeiro, acesse o “hr”Elemento por nome da tag e aplique as propriedades CSS listadas abaixo:

HR
Background-Color: RGB (243, 192, 192);
Top de borda: RGB pontilhado de 3px (10, 53, 245);
Altura: 3px;
largura: 50%;

De acordo com o snippet de código fornecido:

• • ““cor de fundo”Propriedade especifica a cor na parte traseira do elemento.
  • ““Border-top”É utilizado para tornar a linha horizontal pontilhada.
  • ““altura" e "largura”São usados ​​para determinar o tamanho do elemento:

Pode -se observar que desenhamos com sucesso uma linha pontilhada.

Conclusão

Para desenhar uma linha pontilhada com CSS, primeiro, adicione uma linha simples com a ajuda do “

---

" marcação. Então, acesse o “

---

”Elemento por nome de tag no CSS. Depois disso, aplique o “Border-top" ou "fundo de fronteira”Propriedade e especifique seu valor como“pontilhado”. Este post explicou o método para desenhar a linha pontilhada em HTML usando CSS.