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 controlar la sombra de cuadro de un elemento. En CSS, lo hacemos mediante el uso de las propiedades CSS Shadow Effect de box-shadow.
Clases de sombra de caja:
- shadow-sm: esta clase se utiliza para crear efectos de sombra difuminados o pequeños en la caja.
- sombra: esta clase se utiliza para crear efectos de sombra normales en la caja.
- shadow-md: esta clase se utiliza para crear efectos md en la caja.
- shadow-lg: esta clase se utiliza para crear efectos de sombra lg en la caja.
- shadow-xl: esta clase se utiliza para crear efectos de sombra xl en la caja.
- shadow-2xl: esta clase se utiliza para crear efectos de sombra 2xl en la caja.
- shadow-inner: esta clase se utiliza para crear efectos de sombra dentro de la caja.
- shadow-none: esta clase se utiliza para diluir los efectos de sombra.
Sintaxis:
<element class="shadow-{shadow-depth}">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Box Shadow Class</b> <div class="grid grid-flow-col text-center p-2"> <div class="shadow-sm w-24 h-24 bg-green-200 rounded-lg">shadow-sm </div> <div class="shadow w-24 h-24 bg-green-200 rounded-lg">shadow </div> <div class="shadow-md w-24 h-24 bg-green-200 rounded-lg">shadow-md </div> <div class="shadow-lg w-24 h-24 bg-green-200 rounded-lg">shadow-lg </div> <div class="shadow-xl w-24 h-24 bg-green-200 rounded-lg">shadow-xl </div> <div class="shadow-2xl w-24 h-24 bg-green-200 rounded-lg">shadow-2xl </div> </div> </body> </html>
Producción:
Clase de sombra Tailwind CSS Box
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA