DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
09-01-2014

Una manera muy sencilla de tener varios bordes o mejor dicho el efecto de tener varios bordes en un contenedor o elemento es utilizando la propiedad box-shadow; veamos:

Sintaxis de la propiedad box-shadow

box-shadow: x y difuminado propagado color inset;
Valor Descripción
x Requerido. La posición de la sombra en el eje horizontal.
y Requerido. La posición de la sombra en el eje vertical.
difuminado Opcional. Difuminado del borde.
propagado Opcional. Tamaño de la sombra.
color Opcional. Color de la sombra.
inset Opcional. Si está presente, el borde aparecerá dentro del elemento.

Creando bordes con la propiedad box-shadow

Utilizaremos los siguientes atributos para conseguir múltiples bordes con la propiedad box-shadow:

box-shadow: x y difuminado propagado color;

Con estos simples pasos creamos un par de bordes de 2px cada uno; el primero de color verde y el segundo de color rojo:

box-shadow: 0 0 0 2px green, 0 0 0 4px red;

Podemos tener bordes de distintos tamaños:

box-shadow: 0 0 0 2px green, 0 0 0 6px red;

O todos los bordes que queramos en un mismo contenedor:

box-shadow: 0 0 0 2px green, 0 0 0 4px red, 0 0 0 6px blue, 0 0 0 8px yellow; 

Consideraciones generales


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Atomo con CSS

Atomo con CSS

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Algunos artículos que te pueden interesar

¿Cómo hacer una simple galería responsive con CSS 1?

¿Cómo hacer una simple galería responsive con CSS 1?

En esta entrada veremos como hacer una simple galería responsive empleando un poco de CSS y nada más.

Andrés Cruz 10-11-2014

¿Cómo cubrir todo el fondo con una imagen con CSS?

¿Cómo cubrir todo el fondo con una imagen con CSS?

En esta entrada veremos una técnica que permite que una imagen de fondo cubra todo el ancho del navegador web.

Andrés Cruz 16-09-2014

Elementos reversibles con estilo 3D en CSS

Elementos reversibles con estilo 3D en CSS

En esta entrada veremos como hacer que un elemento sea reversible empleando las animaciones y transiciones en CSS.

Andrés Cruz 30-03-2015