Propiedad CSS border-image-slice
Ejemplo
Especifique cómo dividir la imagen del borde:
#borderimg {
border-image-slice: 30%;
}
Definición y uso
La border-image-slice
propiedad especifica cómo dividir la imagen especificada por
border-image-source . La imagen siempre se divide en nueve secciones: cuatro esquinas, cuatro bordes y el medio.
La parte "central" se trata como totalmente transparente, a menos que se establezca la palabra clave de relleno.
Sugerencia: observe también la propiedad border-image (una propiedad abreviada para configurar todas las propiedades border-image-*).
Valor por defecto: | 100% |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.borderImageSlice="30%" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Sintaxis CSS
border-image-slice: number|%|fill|initial|inherit;
Nota: La border-image-slice
propiedad puede tomar de uno a cuatro valores. Si se omite el cuarto valor, es lo mismo que el segundo. Si también se omite el tercero, es lo mismo que el primero. Si también se omite el segundo, es lo mismo que el primero.
Valores de propiedad
Value | Description | Play it |
---|---|---|
number | The number(s) represent pixels for raster images or coordinates for vector images | |
% | Percentages are relative to the height or width of the image | |
fill | Causes the middle part of the image to be displayed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
páginas relacionadas
Tutorial de CSS: imágenes de borde CSS
Referencia CSS: propiedad border-image
Referencia CSS: propiedad border-image-outset
Referencia CSS: propiedad border-image-repeat
Referencia CSS: propiedad border-image-source
Referencia CSS: propiedad border-image-width
Referencia HTML DOM: propiedad borderImageSlice