Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, discutiremos el borde discontinuo de Primer CSS. El borde discontinuo es una serie de líneas cortas. Se puede obtener utilizando la clase con borde discontinuo en Primer CSS.
Clase:
- border-dasshed: Se utiliza para aplicar un borde discontinuo a un cuadro.
Sintaxis:
<div class="border border-dashed ">
Content
</div>
Ejemplo 1: En este ejemplo, escribiremos un texto y haremos un borde discontinuo alrededor.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3> Dashed Borders</h3> </div> <div class="border border-dashed "> GeeksforGeeks is a Computer Science Portal </div> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, crearemos un borde discontinuo alrededor de un div que incluye texto e imagen.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3> Dashed Borders</h3> </div> <div class="border border-dashed "> GeeksforGeeks is a Computer Science Portal <br> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png" width=100px height=100px> </img> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/box#dashed-border
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA