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

Efectos hover con CSS

Efectos hover con CSS

Colourlovers: Paletas de colores lista para el diseño web

Colourlovers: Paletas de colores lista para el diseño web

Loader Battlenet

Loader Battlenet

Algunos artículos que te pueden interesar

Construyendo nuestro propio logo Android con SVG en HTML

Construyendo nuestro propio logo Android con SVG en HTML

En esta entrada abordaremos un tema un poco más práctico y veremos cómo construir nuestro propio logo de Android empleando lo hablado hasta el momento.

Andrés Cruz 21-05-2015

Creando una caja de luz difuminada con CSS

Creando una caja de luz difuminada con CSS

Se explica cómo crear una caja de luz difuminada en fondo y se presentan algunas variantes del experimento.

Andrés Cruz 11-05-2017

Efecto de texto neon con solo CSS

Efecto de texto neon con solo CSS

Se explica cómo crear un sencillo efecto neón con CSS empleando la propiedad text-shadow.

Andrés Cruz 08-09-2017