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
|
---
title: border
slug: Web/CSS/border
tags:
- CSS_参考
translation_of: Web/CSS/border
---
<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">概览</h2>
<p><a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a>的border属性是一个用于设置各种单独的边界属性的<a href="Shorthand_properties">简写属性</a>。<code>border可以用于设置一个或多个以下属性的值：</code> {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}。</p>
<p>{{EmbedInteractiveExample("pages/css/border.html")}}</p>
<p>和所有的简写属性一样，如果有缺省值会被设置成对应属性的初始值。同时需要注意设置border对{{cssxref("border-image")}}属性的影响，虽然border属性不能设置这个属性，但会把该属性重置为初始值none。这使得我们可以用border属性去重置整个样式表中的border设置。因为W3C计划在未来的标准中保留该属性，因此建议使用该属性重置边框设定。</p>
<div class="note style-wrap">
<p><strong>注意：</strong> 虽然{{Cssxref("border-width")}},、{{Cssxref("border-style")}}和 {{Cssxref("border-color")}} 简写属性接受最多4个参数来为不同的边设置宽度、风格和颜色，但boder属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同。</p>
</div>
<h3 id="Borders_vs._outlines">Borders vs. outlines</h3>
<p><code>边界border</code>和轮廓<code>outline</code>很相似。然而轮廓在以下方面与边界不同</p>
<ul>
<li>轮廓不占据空间，他们在元素内容之外绘制</li>
<li>根据规范，轮廓不必为矩形，尽管通常是矩形。</li>
</ul>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre>/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;
/* Global values */
border: inherit;
border: initial;
border: unset;</pre>
<p>可以使用下面列出的一个，两个或三个值来指定<code>border</code>属性。 值的顺序无关紧要。</p>
<div class="blockIndicator note">
<p>注意：如果边框的样式未定义，它将不可见。 这是因为样式默认为none。</p>
</div>
<h3 id="Values" name="Values">取值</h3>
<dl>
<dt>border-width</dt>
<dd>请看 {{ Cssxref("border-width") }}.</dd>
<dt>border-style </dt>
<dd>请看 {{ Cssxref("border-style") }}.</dd>
<dt>border-color </dt>
<dd>{{cssxref("<color>")}} 可以确定border的颜色。如果这个值没有设置，它的默认值是元素的{{cssxref("color")}}属性值（是文字颜色而非背景色）。 请看{{ Cssxref("border-color") }}.</dd>
<dt>
<h3 id="正式语法">正式语法</h3>
<pre><code>{{csssyntax}}</code></pre>
</dt>
</dl>
<h2 id="Examples" name="Examples">示例</h2>
<h3 id="HTML">HTML</h3>
<pre><div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div></pre>
<h3 id="CSS">CSS</h3>
<pre>div {
border: 0.5rem outset pink;
outline: 0.5rem solid khaki;
box-shadow: 0 0 0 2rem skyblue;
border-radius: 12px;
font: bold 1rem sans-serif;
margin: 2rem;
padding: 1rem;
outline-offset: 0.5rem;
}</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample('Example')}}</p>
<h2 id="Specifications" name="Specifications">规范</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', '#the-border-shorthands', 'border')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>在理论上删除了对<code>transparent</code>的支持，因为{{cssxref("<color>")}}已经接受它作为一种有效的颜色值。这不会对实际使用有任何影响。<br>
虽然border不能给{{cssxref("border-image")}}赋特定的值，但可以用于重置{{cssxref("border-image")}}为初始值(<code>none</code>).</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>
<p>加入<code>inherit</code>关键字。<br>
接受transparent作为有效的颜色值。</p>
</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#border', 'border')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>初始定义</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<p>{{Compat("css.properties.border")}}</p>
|
