Como definir bordas pontilhadas em html

Autor：Eve Cole Data da Última Atualização：2025-05-15 03:16:01

Use estilos CSS e elementos de tag html

Para adicionar linhas pontilhadas de borda a diferentes tags HTML, selecionamos vários alinhamentos de etiquetas comuns para definir o efeito da linha pontilhada da borda.

1. Tags HTML comuns

t tag

span

ul li

TABELA TR TD

2. As palavras de atributo CSS são usadas no exemplo

fronteira

largura

altura

3. Introdução aos pontos -chave da implementação de linhas pontilhadas

A fronteira é um atributo de fronteira. Se você deseja alcançar o efeito da fronteira de um objeto, precisará definir a largura da borda, a cor da borda e o estilo de borda (linhas sólidas ou pontilhadas)

Border: 1px tracejou #f00 Isso é para definir a largura do estilo de borda como 1px, a linha pontilhada e a linha pontilhada para o vermelho.

4. Exemplo de descrição

Definimos a mesma largura, a mesma altura e efeitos de borda para os rótulos acima.

5. Código HTML completo:

 <! Doctypehtml> <html>
 <Head> <Metacharset = UTF-8/>
 <title> demonstração de linha pontilhada de borda html www.pcss5.com </title> <yoy>
 .bor {borda: 1pxdashed#f00; largura: 300px; altura: 60px; margem-top: 10px} span {display: block}/*css comentar descrição: deixe o span se formar um bloco*/
 </style> </head>
 <Body> <pclass = bor> pbox </p>
 <Spanclass = Bor> Span Box </span> <ulclass = bor>
 <li> Lista Ulli </li> <li> Lista Ulli </li>
 </ul> <tableClass = bor>
 <tr> <td> forma </td>
 <td> Tabela 2 </td> </tr>
 <tr> <td> dados </td>
 <td> dados 2 </td> </tr>
 </tabela> </body>
 </html>

O exemplo acima define o mesmo estilo para diferentes tags em HTML, incluindo as mesmas linhas pontilhadas de borda.

6. Captura de tela do efeito do navegador

Captura de tela do efeito pontilhado de diferentes tags em bordas de conjunto HTML e linhas pontilhadas