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
|
---
title: border-image-slice
slug: Web/CSS/border-image-slice
translation_of: Web/CSS/border-image-slice
---
<div>{{CSSRef}}</div>
<h2 id="Описание">Описание</h2>
<p>CSS свойство <strong><code>border-image-slice</code></strong> делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это происходит путём указания 4 внутренних смещений.</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>Четыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.</p>
<p>The middle is not used by the border itself but is used as a background-image if the keyword <code>fill</code> is set. The keyword can be set at any position in the property (before, after or between the other values).</p>
<p>The {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} properties define how these images will be used.</p>
<p>The shorthand CSS property {{cssxref("border-image")}} may reset this property to its default value.</p>
<p>{{cssinfo}}</p>
<h2 id="Синтаксис">Синтаксис</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;
/* Глобальные значения */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;
</pre>
<h3 id="Значения">Значения</h3>
<dl>
<dt><em>slice</em></dt>
<dd>Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the four slicing lines. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
<dt><em>horizontal</em></dt>
<dd>Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the two horizontal slicing lines, the top and the bottom ones. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
<dt><em>vertical</em></dt>
<dd>Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the two vertical slicing lines, the right and the left ones. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
<dt><em>top</em></dt>
<dd>Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the top slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
<dt><em>bottom</em></dt>
<dd>Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the bottom slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
<dt><em>right</em></dt>
<dd>Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the right slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
<dt><em>left</em></dt>
<dd>Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the left slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents <em>pixels</em> for raster images and <em>coordinates</em> for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to <code>100%</code>.</dd>
<dt><code>fill</code></dt>
<dd>Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.</dd>
<dt><code>inherit</code></dt>
<dd>Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{csssyntax}}
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Первоначальное определение</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>15.0</td>
<td>{{CompatGeckoDesktop("15.0")}}</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>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>4.1{{property_prefix("-webkit")}}</td>
<td>{{CompatGeckoMobile("15.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
|
