Esta clase acepta más de un valor en Tailwind CSS . Todas las propiedades están cubiertas como en forma de clase. Esta clase se usa para establecer el ancho del anillo de los botones.
Clases de ancho de anillo:
- * : Esta clase se usa para establecer el box-shadow 0 0 #000
- ring: esta clase se utiliza para configurar el anillo.
- ring-0: esta clase no define ningún anillo
- anillo-1: enlace más delgado que se creará usando esta clase.
- ring-2: esta clase se usa para crear el anillo mediano alrededor del botón.
- ring-4: esta clase se usa para crear el anillo grande alrededor del botón.
- ring-8: esta clase se utiliza para crear el anillo más ancho alrededor del botón.
- ring-inset: esta clase se usa para generar un anillo en el interior, como si el relleno funcionara en cualquier elemento.
anillo: esta clase se utiliza para aplicar una sombra de caja sólida de un grosor específico a un elemento. Estos anillos son de color azul semitransparente de forma predeterminada, similar al estilo de anillo de enfoque predeterminado en muchos sistemas.
Sintaxis:
<button class="ring-{number}">...</button >
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https:https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Ring Width Class</b> <div class="mx-16 grid grid-cols-5 gap-2 p-2"> <button class="ring-0 ring-green-600 bg-green-400 ring-opacity-25 w-full h-12 rounded-lg"> Ring-0 </button> <button class="ring-1 ring-green-600 bg-green-400 ring-opacity-25 w-full h-12 rounded-lg"> Ring-1 </button> <button class="ring-2 ring-green-600 bg-green-400 ring-opacity-25 w-full h-12 rounded-lg"> Ring-2 </button> <button class="ring-4 ring-green-600 bg-green-400 ring-opacity-25 w-full h-12 rounded-lg"> Ring-4 </button> <button class="ring-8 ring-green-600 bg-green-400 ring-opacity-25 w-full h-12 rounded-lg"> Ring-8 </button> </div> </body> </html>
Nota: Actualmente, los navegadores no son compatibles con Tailwind CSS Ring Width, por lo que para la salida, comparto el enlace de la salida (Tailwind CSS Playground)
ancho del anillo
ring-inset: esta clase se usa para generar un anillo en el interior, como si el relleno funcionara en cualquier elemento.
Sintaxis:
<button class="ring-inset">...</button >
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Ring Width Class</b> <div class="mx-16 grid grid-cols-5 gap-2 p-2"> <button class="ring-4 ring-green-600 bg-green-400 ring-opacity-25 w-full h-12 rounded-lg"> Ring-4 </button> <button class="ring-4 ring-green-600 ring-inset bg-green-400 ring-opacity-25 w-full h-12 rounded-lg"> ring-inset </button> </div> </body> </html>
ancho del anillo
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA