1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
---
title: border-image-slice
slug: Web/CSS/border-image-slice
tags:
- Bordes CSS
- CSS
- Propiedad CSS
- Referencia
translation_of: Web/CSS/border-image-slice
---
<div>{{CSSRef}}</div>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad CSS <strong><code>border-image-slice</code></strong> divide la imagen especificada por {{cssxref("border-image-source")}} en nueve regiones: las cuatro esquinas, los cuatro bordes y el espacio enmedio. Esto se hace especificando cuatro desplazamientos hacia adentro.</p>
<p><a href="/files/3814/border-image-slice.png" style="float: left;"><img alt="The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></a>Cuatro valores controlan la posición de las líneas de corte. Si algunas no son especificada, se infieren de las otras, con la sintaxis común de cuatro valores de CSS.</p>
<p>La región media no es usada por el borde en sí, pero sí se usa como imagen de fondo si se establece la palabra clave <code>fill</code>. Se puede establecer este valor en cualquier posición en la propiedad (antes, después o entre los otros valores).</p>
<p>Las propiedades {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}} y {{cssxref("border-image-outset")}} definen cómo se usarán estas imágenes.</p>
<p>La propiedad abreviada {{cssxref("border-image")}} podría restaurar esta propiedad a su valor predeterminado.</p>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush:css">/* border-image-slice: <em>slice</em> */
border-image-slice: 30%;
/* border-image-slice: <em>horizontal</em> <em>vertical</em> */
border-image-slice: 10% 30%;
/* border-image-slice: <em>top</em> <em>horizontal</em> <em>bottom</em> */
border-image-slice: 30 30% 45;
/* border-image-slice: <em>top</em> <em>right</em> <em>bottom</em> <em>left</em> */
border-image-slice: 7 12 14 5;
/* border-image-slice: … fill */
/* The fill value can be placed between any value */
border-image-slice: 10% fill 7 12;
/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><em>slice</em></dt>
<dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las cuatro líneas de corte. Un valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inváildos, y valores mayores al tamaño relevante, anchura o altura, son restringidos a <code>100%</code>.</dd>
<dt><em>horizontal</em></dt>
<dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte horizontales, la superior y la inferior. El valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd>
<dt><em>vertical</em></dt>
<dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte verticales, la izquierda y la derecha. El valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd>
<dt><em>top</em></dt>
<dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte superior. El valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd>
<dt><em>bottom</em></dt>
<dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte inferior. El valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd>
<dt><em>right</em></dt>
<dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte derecha. El valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd>
<dt><em>left</em></dt>
<dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte izquierda. El valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd>
<dt><code>fill</code></dt>
<dd>Es una palabra clave cuya presencia forza que la región media de la imagen sea mostrada sobre la imagen de fondo; su tamaño y altura son redimensionados acorde a los fragmentos superior e izquierdo, respectivamente.</dd>
<dt><code>inherit</code></dt>
<dd>Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de su elemento padre.</dd>
</dl>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
{{csssyntax}}
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estatus</th>
<th scope="col">Comentarios</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>15.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("15.0")}}<sup>[1]</sup></td>
<td>11</td>
<td>15</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>4.1{{property_prefix("-webkit")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("15.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Hasta Gecko 47.0 {{geckoRelease("47.0")}} las imágenes SVGs sin viewport no eran divididas correctamente ({{bug("619500")}}). A partir de Gecko 48.0 {{geckoRelease("48.0")}} son mostradas igual que los SVGs con viewport, aunque si las partes no son exactamente el 50%, son ajustadas incorrectamente ({{bug("1264809")}}). Esto fue arreglado en Gecko 49.0 {{geckoRelease("49.0")}}, aunque aun hay un problema con los SVGs sin viewport donde <a href="https://wiki.mozilla.org/Electrolysis">e10s</a> es deshabilitado ({{bug("1284798")}}).</p>
<p>También, SVGs pequeños son ajustados incorrectamente, porque los porcentajes en {{cssxref("border-image-slice")}} son calculados como enteros, en vez de reales ({{bug("1284797")}}).</p>
<h2 id="Véase_también">Véase también</h2>
<ul>
<li><a href="/es/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases">Illustrated description of the 1-to-4-value syntax</a></li>
</ul>
|
