Cómo redondear los bordes y crear varias columnas con css3

Video: 3. Diseño de Columnas | Mi primer sitio web con CSS

En lugar de tener que utilizar hasta cuatro imágenes separadas para dar la ilusión de una forma curvada en su sitio web, con CSS3 ahora puede crear contenedores con esquinas curvas! Aquí está el código, que tiene la declaración CSS3 totalmente apoyado en la parte superior seguido de duplicados prefijados para otros navegadores:

#box {border-radius: 20px; / * para Mozilla Firefox * / - moz-border-radius: 20px; / * para Safari & Google Chrome * / - webkit-border-radius: 20px;}

Se puede utilizar el frontera de radio estilo en cualquier objeto, incluyendo imágenes rectangulares. Cuanto más grande sea el número de píxeles, el más redondo de la orilla.

Video: Tutorial de XHTML y CSS -36- Estilos de Borde

Antes de CSS3, si quería tener varias columnas en su página que había necesidad de cualquiera de los elementos flotar dentro de contenedores o la posición de ellos absolutamente relativa a un contenedor primario. Ahora, con CSS3, puede crear fácilmente varias columnas dentro de un solo recipiente utilizando la propiedad de la columna mediante el establecimiento de los valores para el número de columna y la brecha de ancho, con o sin una regla vertical entre ellos.

# Box1 {/ * para los navegadores que no requieren un prefijo * / columna de recuento: 4-columna-gap: 30px; columna en reglas: #fff sólida 3px - / * para Mozilla Firefox * / - MOZ-column-count: 4- -moz-column-gap: 30px;-columna en reglas -moz: #fff sólida 3px - / * para Safari & Google Chrome * / - webkit-column-count: 4 - webkit-columna-gap: 30px; -webkit-columna-regla: 3px sólida # fff-}

La ilustración muestra una comparación de una capa utilizando el estilo de varias columnas y otro diseño sin columnas. Para obtener más información acerca de cómo se puede controlar aún más el aspecto de sus múltiples columnas, consulte En modo capricho.

Video: CSS - Crear un layout de dos columnas [1 de 2]