Borde predeterminado de Primer CSS

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. Es un sistema que nos ayuda a construir experiencias de usuario consistentes de manera eficiente con suficiente flexibilidad. Este enfoque sistemático garantiza que nuestros estilos sean coherentes e interoperables entre sí. Cuenta con una escala de espaciado altamente componible, tipografía personalizable y colores significativos. Es altamente reutilizable y flexible y se crea con el sistema de diseño de GitHub.

Un borde es un componente que se utiliza para crear bordes de varias formas, tamaños y estilos. El borde más básico y simple que nos proporciona Primer CSS es el borde predeterminado . El borde predeterminado tiene una forma sólida, con un tamaño de 1 px y con un color gris predeterminado. 

Clase de borde predeterminada de Primer CSS:

  • borde: esta clase se utiliza para crear un borde predeterminado.

Sintaxis:

<div class="border">
    ...
</div>

Ejemplo 1: El siguiente ejemplo demostrará los bordes predeterminados en Primer CSS.

HTML

<!DOCTYPE html>
<html>  
<head>
    <title> Primer CSS Default Border </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head>
    
<body>
    <div class="text-left">
        <h1 class="color-fg-success">GeeksforGeeks</h1>
        <h3> Primer CSS Default Border </h3>
    </div>
    <br>
    <div class="border"> <!--Default Border-->
        This Is A Default Border
    </div>
    <div class="border">
        This Is Another Default Border
    </div>
    <div class="border">
        This Is A Default Border Again
    </div>
</body>
</html>

Producción:

 

Ejemplo 2: El siguiente ejemplo demostrará la diferencia entre un texto sin ningún borde y un texto con un borde predeterminado en Primer CSS.

HTML

<!DOCTYPE html>
<html>  
<head>
    <title> Primer CSS Default Border </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head>
    
<body>
    <div class="text-left">
        <h1 class="color-fg-success">GeeksforGeeks</h1>
        <h3> Primer CSS Default Border </h3>
    </div>
    <br>
    <div class="not_border"> 
        This Is Without A Border
    </div>
    <div class="border"> <!--Default Border-->
        This Is A Default Border
    </div>
    <div class="not_border">
        This Is Without A Border Again
    </div>
</body>
</html>

Producción:

 

Referencia: https://primer.style/css/utilities/borders#default-border

Publicación traducida automáticamente

Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *