files/zh-cn/web/css/border-image/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

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

<p><code><strong>border-image </strong></code>CSS属性允许在元素的边框上绘制图像<code>。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉 </code>{{cssxref("border-style")}} 属性所设置的边框样式。虽然规范要求使用 <code>border-image 时</code>边框样式必须存在，但一些浏览器可能没有实现这一点。</p>

<p>特别注意，若 {{cssxref("border-image-source")}}（此值可用<span style="font-family: consolas,monaco,andale mono,monospace;">border-image-source或border-image简写设置)</span> 的值为 none 或者图片不能显示，则将应用 border-style。</p>

<p>{{cssinfo}}</p>

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

<pre class="syntax">/* border-image: image-source image-height image-width image-repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;
</pre>

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

<p>参考各属性对应的值。</p>

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

<pre class="syntaxbox" style="font-size: 14px; white-space: normal;">{{csssyntax}}</pre>

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

<h3 id="位图" name="位图">位图</h3>

<h4 id="HTML_内容">HTML 内容</h4>

<pre class="brush: html">&lt;div id="bitmap"&gt;The image is stretched to fill the area.&lt;/div&gt;</pre>

<h4 id="CSS_内容">CSS 内容</h4>

<pre class="brush: css">#bitmap {
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
}
</pre>

<p>{{ EmbedLiveSample('位图') }}</p>

<h3 id="渐变" name="渐变">渐变</h3>

<h4 id="HTML_内容_2">HTML 内容</h4>

<pre class="brush: html">&lt;div id="gradient"&gt;The image is stretched to fill the area.&lt;/div&gt;</pre>

<h4 id="CSS_内容_2">CSS 内容</h4>

<pre class="brush: css">#gradient {
  border: 30px solid;
  border-image: linear-gradient(red, yellow) 10;
  padding: 20px;
}
</pre>

<p>{{ EmbedLiveSample('渐变') }}</p>

<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', 'border-image')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

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

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