Primer CSS es un marco CSS gratuito de código abierto que se basa en el sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de Github. Crea 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 un modelo altamente reutilizable.
En este artículo, aprenderemos sobre el elemento Color del borde en Primer CSS. Uno de esos elementos de estilo de Primer CSS es el color del borde. El color del borde, como sugiere su nombre, se usa para colorear el borde de un elemento.
Clases: a continuación se muestra la lista de todas las clases de color de borde presentes en Primer CSS junto con su color:
- .color-border-default: esta clase aplica el color de borde gris predeterminado al elemento. Se aplica por defecto.
- .color-border-overlay: esta clase, cuando se aplica, da un tono ligeramente oscuro de blanco al color del borde del elemento.
- .color-border-emphasis: esta clase, cuando se aplica, da un color negro oscuro al color del borde del elemento.
- .color-border-accent: esta clase, cuando se aplica, da un color azul claro al color del borde del elemento.
- .color-border-accent-emphasis: esta clase, cuando se aplica, da un color azul intenso al color del borde del elemento.
- .color-border-success: esta clase, cuando se aplica, da un color verde claro al color del borde del elemento.
- .color-border-success-emphasis: esta clase, cuando se aplica, da un color verde oscuro al color del borde del elemento.
- .color-border-attention: esta clase, cuando se aplica, da un color amarillento claro al color del borde del elemento.
- .color-border-attention-emphasis: esta clase, cuando se aplica, da un color amarillento oscuro al color del borde del elemento.
- .color-border-severe: esta clase, cuando se aplica, da un color marrón claro al color del borde del elemento.
- .color-border-severe-emphasis: esta clase, cuando se aplica, da un color marrón oscuro al color del borde del elemento.
- .color-border-danger: esta clase, cuando se aplica, da un color rojo claro al color del borde del elemento.
- .color-border-danger-emphasis: esta clase, cuando se aplica, da un color rojo oscuro al color del borde del elemento.
- .color-border-done: esta clase, cuando se aplica, da un color violeta claro al color del borde del elemento.
- .color-border-done-emphasis: esta clase, cuando se aplica, da un color violeta oscuro al color del borde del elemento.
- .color-border-sponsors: esta clase, cuando se aplica, da un color rosa claro al color del borde del elemento.
- .color-border-sponsors-emphasis: esta clase, cuando se aplica, da un color rosa oscuro al color del borde del elemento.
Sintaxis:
<div class= “…” > </div>
Nota:
1. De forma predeterminada, Primer CSS proporciona un color al borde del elemento. Agregar clases de borde a los elementos ayuda a anular el valor predeterminado.
2. Aquí hemos mostrado los ejemplos y sintaxis usando el elemento <div> pero puede usar cualquier elemento.
Ejemplo 1: en el siguiente ejemplo, hemos creado tres cuadros con texto escrito en ellos y les hemos dado diferentes colores de borde con la ayuda de las clases de color de borde de imprimación.
Código completo:
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Border Color </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div style="background-color:black; color: lightgreen;" > <h2>GeeksforGeeks</h2> <h3>Primer CSS Border Color</h3> <div class="border color-border-success-emphasis" style="height: 200px; width: 200px; margin: 2em;"> This is the first text box with sample text. This article will be published in GeeksforGeeks website. </div> <div class="border color-border-done-emphasis" style="height: 200px; width: 200px; margin: 2em;" > This is the second text box with sample text. This article will be published in GeeksforGeeks website. </div> </div> </body> </html>
Producción:
Ejemplo 2: Hemos agregado bordes de diferentes colores a los botones usando las Clases CSS de Primer.
Código completo:
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Toast animation in </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body style="color: white; background-color: black;"> <div> <h2>GeeksforGeeks</h2> <h3>Primer CSS Border Color</h3> <button class="btn color-border-success-emphasis" type="button"> Button 1 </button> <button class="btn color-border-danger-emphasis" type="button"> Button 2 </button> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/colors#border
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA