Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Al usar esta clase, podemos colorear cualquier desplazamiento de anillo. En CSS, lo hacemos usando la propiedad CSS Color .
Clases de color del anillo:
- ring-offset – transparent: El color del ring-offset será transparente.
- ring-offset – current: El color del ring-offset dependerá del color del elemento principal.
- ring-offset – black: El color del ring-offset será negro.
- ring-offset – white: El color del ring-offset será blanco.
- ring-offset – gray-50: El color del ring-offset será gris.
- ring-offset – red-50: El color del ring-offset será rojo.
- ring-offset – blue-50: El color del ring-offset será azul.
- ring-offset – indigo-50: El color del ring-offset será índigo.
- ring-offset – purple-50: El color del ring-offset será morado.
- ring-offset – green-50: El color del ring-offset será verde.
- ring-offset – yellow-50: El color del ring-offset será amarillo.
- ring-offset – pink-50: El color del ring-offset será rosa.
Nota: Los valores del color se pueden cambiar de acuerdo con su necesidad de 50 a 900, el intervalo debe ser 100, después de 100.
Sintaxis:
<button class="ring-offset-{color}">...</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 Color 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>
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)
desplazamiento anular
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA