Propiedad border-image-slice
La propiedad border-image-slice le indica
al navegador qué partes de la imagen se usarán para
las esquinas y cuáles para los lados (y qué parte
será la central). A las esquinas van 4
partes, a los lados van 4 partes y una
parte (central) va al fondo del elemento
(opcional, palabra clave fill).
Para más información, consulte la propiedad
border-image.
Sintaxis
1-er al 4-to número | del 1-er al 4-to porcentaje;
}
<-css->
Con números y porcentajes, separados por espacios, puede
estar la palabra clave fill.
Valores
| Valor | Descripción |
|---|---|
| porcentajes | Los porcentajes se calculan en relación con el tamaño de la imagen. Los horizontales en relación con el ancho, los verticales — en relación con la altura. |
| números | Los números son píxeles (para imágenes de mapa de bits) o coordenadas (para imágenes vectoriales). No se especifican unidades de medida. |
fill |
El comportamiento por defecto asume que la parte central
de la imagen se descartará. Para utilizarla,
es necesario usar la palabra clave fill además
de los números o porcentajes.
|
Cantidad de parámetros
El desplazamiento puede tomar 1, 2,
3 o 4 parámetros. Preste
atención al hecho de que las unidades de medida para
el desplazamiento no se escriben (por ejemplo, simplemente 20,
y no 20px). También se puede especificar el grosor en %.
| Número de parámetros | Descripción |
|---|---|
1 |
Grosor para todos los lados simultáneamente. |
2 |
1 2; - 1px para arriba y abajo, 2px para izquierda y derecha. |
3 |
1 2 3; - 1px para arriba, 2px para izquierda y derecha, 3px para abajo. |
4 |
1 2 3 4; - 1px para arriba, 2px para derecha, 3px para abajo, 4px para izquierda. |
Valor por defecto: 100%(?).
Ejemplo
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Ejemplo
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: repeat;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Véase también
-
propiedad
border-image,
que es una abreviatura para el borde de imagen -
propiedad
border-image-source,
que especifica la ruta de la imagen para el borde -
propiedad
border-image-repeat,
que especifica la repetición de la imagen para el borde -
propiedad
border-image-width,
que especifica el tamaño de la imagen para el borde -
propiedad
border-image-outset,
que especifica el desplazamiento de la imagen para el borde
