En este artículo, aprenderemos cómo podemos usar Border Radius para crear temas en nuestro sitio web usando el kit de herramientas Tachyons . Tachyons es un conjunto de herramientas que se utiliza para crear un sitio web receptivo. Esto se utiliza para definir el estilo de radio de borde al elemento que se aplica.
Sintaxis:
<element-name class="class-name">...</element-name>
Clases de radio de borde de tematización de taquiones:
- br0: esta clase se utiliza para definir un radio de borde de 0 rem.
- br1: esta clase se utiliza para definir el radio del borde de .125rem.
- br2: esta clase se utiliza para definir el radio del borde de 0,25 rem.
- br3: Esta clase se usa para definir el radio del borde de .5rem.
- br4: esta clase se utiliza para definir el radio del borde de 1 rem.
- br-100: esta clase se utiliza para definir el radio del borde del 100%.
- br-pill: esta clase se usa para definir el radio del borde de 9999px.
- br–bottom: esta clase se usa para habilitar el radio del borde solo en la parte inferior, configurando los otros lados en 0.
- br–top: esta clase se usa para habilitar el radio del borde solo en la parte superior, configurando los otros lados en 0.
- br–right: esta clase se usa para habilitar el radio del borde solo a la derecha, configurando los otros lados en 0.
- br–left: esta clase se usa para habilitar el radio del borde solo a la izquierda, configurando los otros lados en 0.
Ejemplo 1: en este ejemplo, estableceremos el radio del borde en 0,25 rem .
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<h1 class="ba br3">GeeksforGeeks</h1>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, estableceremos el radio del borde en 100% .
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<h1 class="ba br-100">GeeksforGeeks</h1>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/themes/border-radius/
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA