CSS3 Frontera
CSS3 Frontera
Con CSS3, puede crear esquinas redondeadas, añadir una caja de sombra, y como la imagen de la frontera sin necesidad de utilizar programas de diseño como Photoshop.
En este capítulo, aprenderá las siguientes propiedades de borde:
- la frontera de radio
- box-shadow
- frontera-imagen
CSS3 esquinas redondeadas
Añadir los filetes difíciles en CSS2. Tuvimos que usar una imagen diferente cada esquina.
En CSS3, es muy fácil crear esquinas redondeadas.
En el CSS3 border-radio se utiliza para crear esquinas redondeadas:
Esto se redondea fronteras!
Ejemplos
Añadir los filetes en un elemento div:
div
{
border:2px solid;
border-radius:25px;
}
{
border:2px solid;
border-radius:25px;
}
Trate »
sombras de la caja CSS3
La propiedad box-shadow de CSS3 se utiliza para añadir una sombra:
fotos fronterizas CSS3
Con la propiedad border-image CSS 3, puede utilizar una imagen para crear una frontera:
la propiedad border-image le permite especificar una imagen como una frontera! Se utiliza para crear el borde anterior de la imagen original:
Use imágenes para crear div frontera:
Ejemplos
Use imágenes para crear un div frontera
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 */
}
Trate »
Nuevas propiedades de borde
| propiedad | explicación | CSS |
|---|---|---|
| frontera-imagen | Configuración de las propiedades de la forma rápida border de todas las imágenes. | 3 |
| la frontera de radio | Uno para el establecimiento de los cuatro frontera - * - propiedad radio de taquigrafía | 3 |
| box-shadow | Adjuntar una o varias sombras de la caja desplegable | 3 |