files/zh-cn/web/css/border-image-width/index.html


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

---
title: border-image-width
slug: Web/CSS/border-image-width
tags:
  - CSS
  - CSS Borders
  - CSS Property
  - Reference
  - 'recipe:css-property'
translation_of: Web/CSS/border-image-width
---
<div>{{CSSRef}}</div>

<p><a href="/en-US/docs/Web/CSS">CSS</a>属性 <strong><code>border-image-width</code></strong> 指定了 <a href="/zh-CN/docs/Web/CSS/border-image">边界图像 (border image</a>) 的宽度</p>

<div>{{EmbedInteractiveExample("pages/css/border-image-width.html")}}</div>


<p>如果本属性值大于元素的 {{cssxref("border-width")}}，边界图像将会向 padding 边缘延展</p>

<h2 id="语法">语法</h2>

<pre class="brush:css no-line-numbers notranslate">/* 关键字 */
border-image-width: auto;

/* 长度 */
border-image-width: 1rem;

/* 百分比 */
border-image-width: 25%;

/* 数值 */
border-image-width: 3;

/* 垂直 | 水平 */
border-image-width: 2em 3em;

/* 上 | 横向 | 下 */
border-image-width: 5% 15% 10%;

/* 上 | 右 | 下 | 左 */
border-image-width: 5% 2em 10% auto;

/* 全局值 */
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;
</pre>

<p><code>border-image-width</code> 属性的值可用以下方式进行设定：</p>

<ul>
 <li>当指定 <strong>一个</strong> 值时，它将作用到 <strong>四个方向 </strong>；</li>
 <li>当指定 <strong>两个</strong> 值时，它将分别作用到 <strong>垂直方向 </strong>和 <strong>水平方向 </strong>；</li>
 <li>当指定 <strong>三个</strong> 值时，它将分别作用到 <strong>上方</strong>、<strong>水平方向</strong>、和<strong>下方</strong>；</li>
 <li>当指定 <strong>三个</strong> 值时，它将分别作用到 <strong>上方</strong>、<strong>右方</strong>、<strong>下方和左方。</strong></li>
</ul>

<h3 id="取值">取值</h3>

<dl>
 <dt><code>&lt;长度-百分比&gt;</code></dt>
 <dd>边界的宽度, 可按 {{cssxref("&lt;length&gt;")}} 或 {{cssxref("&lt;percentage&gt;")}} 指定。百分比是相较于水平（垂直）方向上的边框图像区域宽度（高度）的偏移量，不能为负。</dd>
 <dt><code>&lt;数值&gt;</code></dt>
 <dd>边框宽度，指定为 {{cssxref("border-width")}} 的相应倍数，不能为负。</dd>
 <dt><code>auto</code></dt>
 <dd>将等同于内部对应的 {{cssxref("border-image-slice")}} 的宽或高（可用的话）。如果图像没有需要的相应的属性，将相对于 <code>border-width</code> 进行指定。</dd>
</dl>

<h2 id="正式定义">正式定义</h2>

<p>{{CSSInfo}}</p>

<h2 id="正式语法">正式语法</h2>

{{csssyntax}}

<h2 id="示例">示例</h2>

<h3 id="Tiling_a_border_image">Tiling a border image</h3>

<p>示例使用了下方 90*90 像素的 ".png" 图像。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10470/border.png"></p>

<p>因此，每个圆圈为 30*30 像素。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
   no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">p {
  border: 20px solid;
  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}</pre>

<h4 id="结果">结果</h4>

<p>{{EmbedLiveSample('Tiling_a_border_image', 200, 240)}}</p>

<h2 id="Specifications" name="Specifications">技术规格</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">CSS版本</th>
   <th scope="col">状态</th>
   <th scope="col">评注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>初始定义</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>


<p>{{Compat("css.properties.border-image-width")}}</p>