Esta clase acepta más de un valor en Tailwind CSS . Todas las propiedades están cubiertas en forma de clase. Esta clase se utiliza para establecer el ancho de desplazamiento del anillo de los botones.
Clases de ancho de desplazamiento del anillo:
- ring-offset-0: esta clase se utiliza para denegar el ring-offset.
- ring-offset-1: esta clase se utiliza para establecer el desplazamiento de anillo más pequeño.
- ring-offset-2: esta clase se utiliza para establecer el desplazamiento medio del anillo.
- ring-offset-4: esta clase se utiliza para establecer el gran desplazamiento del anillo.
- ring-offset-8: esta clase se utiliza para establecer el desplazamiento de anillo más grande.
Nota: actualmente, los navegadores no son compatibles con Tailwind CSS Ring Width, por lo que para la salida, comparto el enlace de la salida. (Patio de juegos CSS de viento de cola)
Sintaxis:
<button class="ring-offset-{width}">...</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 Offset Width Class</b> <div class="mx-16 grid grid-cols-2 gap-6 p-2"> <button class="ring-4 ring-green-600 ring-offset-4 ring-offset-green-700 bg-green-400 ring-opacity-25 w-full h-12 rounded-lg"> ring-offset-4 ring-offset-green-700 </button> <button class="ring-4 ring-green-600 bg-green-400 ring-offset-4 ring-offset-yellow-700 ring-opacity-25 w-full h-12 rounded-lg"> ring-offset-4 ring-offset-yellow-700 </button> </div> </body> </html>
Producción:
ancho de desplazamiento 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