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
|
---
title: border-image-slice
slug: Web/CSS/border-image-slice
translation_of: Web/CSS/border-image-slice
---
<div>{{CSSRef}}</div>
<h2 id="概要">概要</h2>
<p>通过{{cssxref("border-image-source")}} 引用边框图片后，<strong><code>border-image-slice</code></strong>属性会将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。</p>
<p><br>
<img alt="The nine regions defined by the border-image or border-image-slice properties" src="https://developer.mozilla.org/files/3814/border-image-slice.png"></p>
<p>上图说明了每个区域的位置。</p>
<ul>
<li>区域 1-4 为角区域（corner region）。 每一个都用一次来形成最终边界图像的角点。（Each one is used a single time to form the corners of the final border image.）</li>
<li>区域 5-8 边区域（edge region）。在最终的边框图像中重复，缩放或修改它们以匹配元素的尺寸。（These are <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat">repeated, scaled, or otherwise modified</a> in the final border image to match the dimensions of the element.）</li>
<li>区域 9 为中心区域（ middle region）。它在默认情况下会被丢弃，但如果设置了关键字<code>fill</code>，则会将其用作背景图像。（It is discarded by default, but is used like a background image if the keyword <code>fill</code> is set.）</li>
</ul>
<p> </p>
<p>中间的区域将不会被边框使用，但当设置有 fill 关键词时将会被作为 background-image。这个关键词可以被设置在属性的任何一个位置(前面、后面或者两个值之间)</p>
<p>{{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} 属性则定义这些图片将如何使用。</p>
<h2 id="语法">语法</h2>
<pre class="brush:css">/* 所有的边 */
border-image-slice: 30%;
/* 垂直方向 | 水平方向 */
border-image-slice: 10% 30%;
/* 顶部 | 水平方向 | 底部 */
border-image-slice: 30 30% 45;
/* 上 右 下 左 */
border-image-slice: 7 12 14 5;
/* 使用fill（fill可以放在任意位置） */
border-image-slice: 10% fill 7 12;
/* Global values */
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. 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 slicing lines corresponding to the horizontal edges, the right and the left ones. 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 slicing lines corresponding to the vertical edges, the top and the bottom ones. 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. 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. 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. 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. 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">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Initial defintion</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>{{Compat("css.properties.border-image-slice")}}</div>
<div> </div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases">Illustrated description of the 1-to-4-value syntax</a></li>
</ul>
|
