CSS3 Bordes
Bordes CSS3
Con CSS3, puedes crear bordes redondeados, agregar sombras a las cajas y usar imágenes como bordes sin usar programas de diseño como Photoshop.
En este capítulo, conocerás las siguientes propiedades de borde:
- border-radius
- box-shadow
- border-image
Bordes redondeados CSS3
En CSS2, agregar esquinas redondeadas era complicado. Teníamos que usar diferentes imágenes en cada esquina.
En CSS3, es fácil crear esquinas redondeadas.
En CSS3, la propiedad border-radius se usa para crear esquinas redondeadas:
¡Este es un borde con esquinas redondeadas!
Ejemplo
Agregar elementos con esquinas redondeadas en un div:
div
{
border:2px solid;
border-radius:25px;
}
{
border:2px solid;
border-radius:25px;
}
Pruébalo »
Sombra de caja CSS3
La propiedad box-shadow en CSS3 se usa para agregar sombras:
Ejemplo
Agregar la propiedad box-shadow a un div
div
{
box-shadow: 10px 10px 5px #888888;
}
{
box-shadow: 10px 10px 5px #888888;
}
Pruébalo »
Imagen de borde CSS3
Con la propiedad border-image de CSS3, puedes usar una imagen para crear un borde:
¡La propiedad border-image te permite especificar una imagen como borde! La imagen original utilizada para crear el borde anterior:
Crear un borde con una imagen en un div:
Ejemplo
Crear un borde con una imagen en un div
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
Pruébalo »
Nuevas propiedades de borde
| Propiedad | Descripción | CSS |
|---|---|---|
| border-image | Propiedad abreviada para establecer todas las imágenes de borde. | 3 |
| border-radius | Una propiedad abreviada para configurar las cuatro propiedades de radio de borde (*-radius). | 3 |
| box-shadow | Adjunta una o más sombras proyectadas a la caja. | 3 |