Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas como en forma de clase. Usando esta clase podemos establecer la opacidad de cualquier anillo. En CSS, hacemos eso usando la propiedad CSS Opacity .
Clase de opacidad del anillo:
- ring-opacity-0: controle la opacidad del color del marcador de posición de un elemento utilizando las utilidades ring-opacity-{amount} .
Nota: El número de la opacidad se puede cambiar de 0 a 100 con un intervalo de 5.
Sintaxis:
<button class="ring-{opacity}">...</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 Opacity 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, consulte el enlace de la salida. (Tailwind CSS Playground)
Producción:
opacidad del anillo
Consulte: https://play.tailwindcss.com/oyrZcKTljL
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA