CSS3 Borde (Border)

Usar CSS3puede aplicar imágenes a los bordes del elemento.

Usar CSS3Borde

CSS3Se proporcionan dos nuevas propiedades para estilizar de manera más elegante los bordes de los elementos- border-image se utiliza para agregar imágenes al border-La propiedad radius, así como las propiedades utilizadas para crear bordes redondos sin usar imágenes.

La próxima sección le presentará CSS3Estos nuevos atributos de borde, para otros atributos relacionados con el borde, consulteBordes de CSSTutoriales.

Crear CSS3redondeo

Este border-La propiedad radius se puede usar para crear bordes redondos. Esta propiedad generalmente define la forma de los bordes exteriores de la esquina. En CSS3Antes de eso, las imágenes de rebanadas se utilizaban para crear bordes redondos bastante problemáticos.

.box　{
　　　　width:　300px;
　　　　height:　150px;
　　　　background:　#ffb6c1;
　　　　border:　2px　solid　#f08080;
　　　　border-radius:　20px;
}

Agregar CSS3Imágenes de borde

border-La propiedad image permite especificar una imagen para usar como borde del elemento.
El diseño del borde se originó en border-Se crean los lados y las esquinas de la imagen especificada en la URL de la fuente de imagen. Se pueden cortar, repetir, escalar y estirar los bordes de la imagen de manera que se ajusten al tamaño de la región de la imagen del borde.

.box　{
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px　solid　transparent;
　　　　-webkit-border-image:　url("border.png")　30　30　round;　/*　Safari　3.1-5　*/
　　　　-o-border-image:　url("border.png")　30　30　round;　/*　Opera　11-12.1　*/
　　　　border-image:　url("border.png")　30　30　round;
}