Los estilos de las cajas en CSS3

Las nuevas propiedades CSS3

De todas las novedades de CSS3, son las nuevas propiedades para el diseño de las cajas las que han generado un mayor entusiasmo y más reacciones de júbilo entre los diseñadores web. Todos soltaron un suspiro de alivio: ***por fin vamos a poder aplicar bordes redondeados, degradados, sombras y transparencias a las cajas "div"***.

El tamaño de las cajas

1. Con CSS 2.1
   Como usted sabe, con CSS 2.1, el tamaño necesario para la visualización de una caja tiene en cuenta los márgenes (margin), los bordes (border), el espaciado (padding) y el contenido (width).
2. Con CSS3
   En CSS3, con la propiedad box-sizing, usted podrá indicar que los valores de border y de padding se incluyan en el tamaño de width. Esta propiedad acepta dos valores:
   
   • content-box: el ancho de la caja se calcula en función del tamaño del contenido, del borde y del espaciado, como en CSS 2.1. Se trata del valor predeterminado.
   • border-box: el ancho de la caja incluye el tamaño del contenido, del borde y del espaciado.

El desbordamiento de contenido

Los estilos CSS 2.1 nos permiten usar la propiedad overflow para gestionar el contenido cuando este último es mayor que el contenedor. Se trata del famoso principio del "desbordamiento de contenido".
CSS3 nos propone dos nuevas propiedades para gestionar el desbordamiento:

• overflow-x: para gestionar el desbordamiento horizontal.
• overflow-y: para gestionar el desbordamiento vertical.

Los valores posibles son los mismos que en CSS 2.1:

• visible: el contenido permanece siempre visible.
• hidden: el contenido permanece siempre oculto.
• scroll: se puede acceder al contenido gracias a una barra de desplazamiento que permanece siempre visible.
• auto: se puede acceder al contenido gracias a una barra de desplazamiento que solamente se muestra si resulta necesario.