Las propiedades de borde CSS nos permiten establecer el estilo, el color y el ancho del borde. Tachyon es un conjunto de herramientas que se utiliza para crear un sitio web receptivo.
Clases usadas:
- Borde: la clase «ba» se utiliza para crear un borde simple.
- Borde superior: la clase «bt» se utiliza para crear un borde desde la parte superior.
- Borde derecho: la clase «br» se utiliza para crear un borde desde la derecha.
- Borde inferior: la clase «bb» se utiliza para crear un borde desde la parte inferior.
- Borde izquierdo: la clase «bl» se usa para crear un borde desde la izquierda.
Estilos de borde:
- Discontinua: La clase “b–discontinua” se usa para crear un borde discontinuo.
- Punteado: La clase “b–dotted” se usa para crear un borde punteado.
- Sólido: la clase «ba» predeterminada se utiliza para crear un borde sólido.
Anchos de borde:
- bw1: esta clase se usa para crear el borde del valor-1.
- bw2: esta clase se utiliza para crear el borde del valor-2.
- bw3: esta clase se usa para crear el borde del valor-3.
- bw4: esta clase se usa para crear el borde del valor-4.
- bw5: esta clase se usa para crear el borde del valor-5.
Colores de borde:
- b–black: Esta clase se utiliza para crear un borde de color negro.
- b–near-black: esta clase se utiliza para crear un borde de color casi negro.
- b–dark-gray: Esta clase se utiliza para crear un borde de color gris oscuro.
- b–mid-gray: esta clase se utiliza para crear un borde de color gris medio.
- b–gray: Esta clase se utiliza para crear un borde de color gris.
- b–silver: Esta clase se utiliza para crear un borde de color plateado.
- b–light-silver: esta clase se utiliza para crear un borde de color plateado claro.
- b–light-gray: Esta clase se utiliza para crear un borde de color gris claro.
- b–near-white: esta clase se utiliza para crear un borde de color casi blanco.
- b–dark-red: Esta clase se utiliza para crear un borde de color rojo oscuro.
- b–red: Esta clase se utiliza para crear un borde de color rojo.
- b–orange: Esta clase se usa para crear un borde de color naranja.
- b–gold: Esta clase se utiliza para crear un borde de color dorado.
- b–purple: Esta clase se usa para crear un borde de color púrpura.
- b–amarillo: Esta clase se utiliza para crear un borde de color amarillo.
- b–light-purple: Esta clase se utiliza para crear un borde de color violeta claro.
- b–hot-pink: esta clase se utiliza para crear un borde de color rosa intenso.
- b–dark-pink: esta clase se utiliza para crear un borde de color rosa oscuro.
- b–pink: Esta clase se usa para crear un borde de color rosa.
- b–dark-green: esta clase se utiliza para crear un borde de color verde oscuro.
- b–green: Esta clase se utiliza para crear un borde de color verde.
- b–navy: Esta clase se usa para crear un borde de color azul marino.
- b–dark-blue: esta clase se utiliza para crear un borde de color azul oscuro.
- b–blue: Esta clase se usa para crear un borde de color azul.
- b–light-blue: esta clase se utiliza para crear un borde de color azul claro.
- b–lightest-blue: esta clase se utiliza para crear un borde del color azul más claro.
- b–washed-blue: esta clase se utiliza para crear un borde de color azul lavado.
- b–washed-green: esta clase se utiliza para crear un borde de color verde lavado.
- b–washed-yellow: esta clase se utiliza para crear un borde de color amarillo lavado.
- b–light-pink: esta clase se utiliza para crear un borde de color rosa claro.
- b–light-yellow: Esta clase se utiliza para crear un borde de color amarillo claro.
- b–light-red: Esta clase se utiliza para crear un borde de color rojo claro.
Sintaxis:
<element-name class="class-name">
...
</element-name>
Ejemplo 1: En el siguiente ejemplo, haremos uso de las clases anteriores para demostrar el uso de la propiedad de borde usando la clase «ba» base de borde.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
body{
text-align:center;
margin:12px;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3><br>
<div class="ba"> GeeksforGeeks</div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, haremos uso de las clases anteriores para demostrar el uso de la propiedad border .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
body
{
text-align:center;
margin:12px;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3><br>
<div class="ba"> GeeksforGeeks</div> <br>
<div class="ba b--dashed"> GeeksforGeeks</div> <br>
<div class="ba b--dotted"> GeeksforGeeks</div> <br>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/themes/borders/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA