Ejemplo
Coloque la imagen Frontera 10 píxeles fuera de los límites de bordes de un elemento:
#borderimg
{
border-image-source: url(border.png);
border-image-outset: 10px;
}
Definición y Uso
La propiedad border-image-inicio especifica la cantidad en que el área de la imagen frontera se extiende más allá del borde de cuadro.
Consejo: También mirar la imagen frontera propiedad (a shorthand property for setting all the border-image-* properties) .
Valor por defecto: | 0 |
---|---|
Heredado: | no |
animatable: | no. Read about animatable |
Versión: | CSS3 |
la sintaxis de JavaScript: | object .style.borderImageOutset="10px" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Propiedad | |||||
---|---|---|---|---|---|
border-image-outset | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
sintaxis CSS
border-image-outset:length|number|initial|inherit;
Note: La propiedad border-image-principio puede tomar de uno a cuatro valores (top, right, bottom, and left sides) . Si se omite el cuarto valor, es el mismo que el segundo. Si también se omite la tercera uno, es el mismo que el primero. Si también se omite el segundo uno, es el mismo que el primero.
Valores de propiedad
Valor | Descripción | Juegalo |
---|---|---|
length | Una unidad de longitud que especifica a qué distancia de los bordes aparecerá la imagen-frontera. El valor por defecto es 0 | Juegalo " |
number | Representan múltiplos de la frontera-anchura que corresponde | Juegalo " |
initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | Juegalo " |
inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Páginas relacionadas
CSS3 tutorial: Imágenes CSS3 Frontera
CSS de referencia: border-image property
CSS Referencia: border-image-repeat property
CSS de referencia: border-image-slice property
CSS de referencia: border-image-source property
CSS Referencia: border-image-width property
Referencia HTML DOM: borderImageOutset property