Cómo establecer bordes punteados en HTML

Autor：Eve Cole Fecha de actualización：2025-05-15 03:16:01

Use estilos CSS y elementos de etiqueta HTML

Para agregar líneas punteadas de borde a diferentes etiquetas HTML, seleccionamos varias alineaciones de etiquetas comunes para establecer el efecto de línea punteada de borde.

1. Etiquetas HTML comunes

etiqueta P

durar

ul li

tabla tr td

2. Las palabras de atributo CSS se usan en el ejemplo

borde

ancho

altura

3. Introducción a los puntos clave de implementación de líneas punteadas

El borde es un atributo fronterizo. Si desea lograr el efecto fronterizo de un objeto, debe establecer el ancho del borde, el color del borde y el estilo de borde (líneas continuas o punteadas)

Border: 1px Dable #F00 Esto es para establecer el ancho de estilo de borde en 1px, la línea punteada y la línea punteada en rojo.

4. Descripción del ejemplo

Establecemos el mismo ancho, la misma altura y efectos de borde para las etiquetas anteriores.

5. Complete el código HTML:

 <! Doctypehtml> <html>
 <HEAD> <metacharset = utf-8/>
 <title> Demostración de la línea de puntos del borde HTML www.pcss5.com </title> <style>
 .bor {border: 1pxDashed#f00; ancho: 300px; altura: 60px; margin-top: 10px} span {display: block}/*css Comment Descripción: Deje que el tramo forme un bloque*/
 </style> </head>
 <body> <pclass = bor> pbox </p>
 <spanclass = bor> span box </span> <ulclass = bor>
 <li> Lista de Ulli </li> <li> Lista de Ulli </li>
 </ul> <tableClass = bor>
 <tr> <td> form </td>
 <TD> Tabla 2 </td> </tr>
 <tr> <td> datos </td>
 <TD> DATA 2 </td> </tr>
 </table> </body>
 </html>

El ejemplo anterior establece el mismo estilo para diferentes etiquetas en HTML, incluidas las mismas líneas punteadas de borde.

6. Captura de pantalla del efecto del navegador

Captura de pantalla del efecto punteado de diferentes etiquetas en HTML establece bordes y líneas punteadas