Ejemplo
Especificar cómo cortar la imagen Frontera:
#borderimg {
border-image-slice: 30;
}
Inténtalo tú mismo " Definición y Uso
La propiedad border-image-rebanada especifica cómo cortar la imagen especificada por la frontera de la imagen de código . La imagen siempre está cortado en nueve secciones: cuatro esquinas, cuatro bordes y el centro.
El "middle" parte es tratada como totalmente transparente, a menos que se establece la palabra clave de relleno.
Consejo: También mirar la imagen frontera propiedad (a shorthand property for setting all the border-image-* properties) .
| Valor por defecto: | 100% |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.borderImageSlice="30%" 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-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
sintaxis CSS
border-image-slice:number|%|fill|initial|inherit;Note: La propiedad border-image-rebanada puede tomar de uno a cuatro valores. 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 |
|---|---|---|
| number | El number(s) representa los píxeles para imágenes de mapa de bits o coordenadas de imágenes vectoriales | Juegalo " |
| % | Los porcentajes son en relación con la altura o anchura de la imagen | Juegalo " |
| fill | Hace que la parte media de la imagen que se mostrará | Juegalo " |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | |
| 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-outset property
CSS Referencia: border-image-repeat property
CSS de referencia: border-image-source property
CSS Referencia: border-image-width property
Referencia HTML DOM: borderImageSlice property