Tailwind CSS es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita. La utilidad Tailwind CSS Border establece el radio, el ancho, el color, la opacidad, etc., de los bordes de los elementos. todas las propiedades cubiertas como en este formulario de clase.
- Radio de borde de CSS de viento de cola
- Ancho de borde CSS de Tailwind
- Color de borde CSS de Tailwind
- Opacidad de borde CSS de Tailwind
- Estilo de borde CSS Tailwind
- Tailwind CSS Dividir ancho
- Tailwind CSS Dividir color
- Tailwind CSS Divide la opacidad
- Estilo de división CSS Tailwind
- Tailwind CSS Ancho del anillo
- Tailwind CSS Color del anillo
- Opacidad del anillo CSS de Tailwind
- Tailwind CSS Ring Offset Ancho
- Tailwind CSS Ring Offset Color
El siguiente ejemplo le dará una breve idea sobre los bordes de Tailwind CSS:
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>
Producción:
Bordes CSS de viento de cola
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA